Vagrant VirtualBox Local Dev Env,Ubuntu,Yarn,Vue CLI 3 - 问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vagrant VirtualBox Local Dev Env,Ubuntu,Yarn,Vue CLI 3 - 问题相关的知识,希望对你有一定的参考价值。

我正在尝试设置一个包含以下内容的本地开发环境:

  • Ubuntu服务器流浪者盒
  • 我现有的vuejs项目是使用Vue CLI 3创建的,并通过synced_folder传递给vagrant
  • 然后运行yarn run serve并使用vagrant box上的端口转发在我的主机上访问它。

背景: 我在我的Ubuntu 16.04笔记本电脑上开发了一个vue CLI 3项目,该项目运行良好,但是,我想将它移到一个流浪盒中以保持我的本地机器整洁。我目前使用的yarn run serve效果很好。我希望能够在新的vagrant开发环境中运行此命令。

问题/问题摘要:

  • 安装其依赖项后找不到vue命令
  • 当试图在流浪盒内运行yarn run serve时,纱线吐出的许可证问题
  • fsevents@1.2.4时,有一个yarn global add @vue/cli消息

配置本地开发环境:

Vagrantfile

# -*- mode: ruby -*-
# vi: set ft=ruby :

Vagrant.configure("2") do |config|

    config.vm.define "webserver_dev" do |webserver_dev|

        webserver_dev.vm.box = "ubuntu/xenial64"
        webserver_dev.vm.network "private_network", ip: "192.168.33.10"
        webserver_dev.vm.network "forwarded_port", guest: 80, host: 8888
        webserver_dev.vm.network "forwarded_port", guest: 8080, host: 8080
        webserver_dev.vm.hostname = "develop.dev"

        webserver_dev.vm.synced_folder ".", "/var/www", :mount_options => ["dmode=777", "fmode=666"]

        webserver_dev.ssh.forward_agent = true

        webserver_dev.vm.provider "virtualbox" do |vb|
            vb.memory = "1824"
            vb.cpus = "2"
        end
    end
end

提供流浪盒:ubuntu/xenial64 (virtualbox, 20180802.0.0)

sudo apt update && sudo apt upgrade  
sudo apt install build-essential libssl-dev -y   

# install node and npm:
cd ~  
curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.sh  
sudo bash nodesource_setup.sh    

# install yarn
curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -  
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list  
sudo apt-get update && sudo apt-get install yarn    

# Show installed versions  
yarn -v  (outputs 1.9.4)  
node -v  (outputs v10.9.0)  
npm -v  (outputs 6.2.0)   

问题/问题输出: 当我导航到我现有的vue项目文件夹并在vagrant ssh中运行yarn run serve时,我收到以下错误:

yarn run v1.9.4
$ vue-cli-service serve
/bin/sh: 1: vue-cli-service: Permission denied
error Command failed with exit code 126.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

当我运行sudo yarn run serve (我不应该以root身份运行它,但:)

yarn run v1.9.4
$ vue-cli-service serve
/bin/sh: 1: vue-cli-service: Permission denied
error Command failed with exit code 126.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

运行vue --version

vagrant@cc:~$ vue --version
No command 'vue' found, did you mean:
 Command 'vpe' from package 'texlive-latex-extra' (universe)
vue: command not found

运行yarn global add @vue/cli的输出 如官方vue-cli安装documentation所示 注意:我得到的fsevents@1.2.4消息。这可能导致问题吗?

vagrant@cu:~$ yarn global add @vue/cli
yarn global v1.9.4
[1/4] Resolving packages...
[2/4] Fetching packages...
[----------------------------------------------------------------------------------------------------------------------------------------] 0/617(node:7694) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "@vue/cli@3.0.1" with binaries:
      - vue
Done in 58.25s.

摘要: 有没有人在那里实现了本地开发环境,他们成功地在其中运行yarn run serve并在其主机上访问结果?

我非常有兴趣了解其他开发人员如何为vue js项目进行本地开发,这些项目还有其他需要反向代理的服务(例如,节点js app在不同的端口上运行)。

我花了很多时间试图将其设置为无济于事。也许这些工具不能很好地结合在一起。如果您认为可以提供帮助,我将非常感激。谢谢

答案

临时解决方法: - 受此post的启发

经过进一步的故障排除后,我发现问题肯定是与权限相关的问题(与vue-cli无关)。我认为,当我的流浪汉使用虚拟机时,存在一个虚拟机问题,其中包含来自我的主机的同步文件夹的符号链接,这可能会更改权限并阻止chmod命令对文件产生任何影响。在我的例子中,node_modules / .bin目录中的execute标志不可执行。

对于任何有类似问题的人来说,这是我目前解决这个问题的方法(帮自己一个忙,请阅读https://github.com/hashicorp/vagrant/issues/713,我希望我早些时候找到它!):

1)将项目package.json复制到:yarn全球目录:/home/vagrant/.config/yarn/global/

cp /var/www/project/package.json /home/vagrant/.config/yarn/global/

2)在yarn用户目录中全局安装项目依赖项:

cd /home/vagrant/.config/yarn/global
yarn install

3)现在返回项目并运行yarn run serve,因为它使用/home/vagrant/.config/yarn/global/node_modules/.bin/中具有正确可执行权限的node_modules。

cd /var/www/project/package.json
yarn run serve

问题原因示例: 1)将目录更改为项目,并使用ls -l查看权限:

cd /var/www/project/node_modules/.bin
ls -la

输出:

lrw-rw-rw- 1 vagrant vagrant    18 Aug 29 00:21 which -> ../which/bin/which

2)尝试使文件可执行:

chmod 777 ./which (adding sudo doesn't make this work either)

输出:

lrw-rw-rw- 1 vagrant vagrant    18 Aug 29 00:21 which -> ../which/bin/which

老答案 - 没有工作:我现在使用的解决方案来自这里:Source

将此添加到Vagrantfile可使符号链接正常工作。 我在我的主机和客户机上使用ubuntu,因此无法确定这适用于Mac和Windows。

config.vm.provider "virtualbox" do |v|
    v.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/vagrant", "1"]
end

进一步阅读:

https://github.com/hashicorp/vagrant/issues/713

以上是关于Vagrant VirtualBox Local Dev Env,Ubuntu,Yarn,Vue CLI 3 - 问题的主要内容,如果未能解决你的问题,请参考以下文章

Jenkins / Vagrant / VirtualBox - Virtualbox 以系统用户身份运行?

Vagrant+virtualBox

VirtualBox + vagrant

vagrant 怎么打开virtualbox

Vagrant 无法挂载 VirtualBox 共享文件夹

mac下virtualbox+vagrant安装