3

我正在尝试设置一个本地开发环境,其中包括:

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

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

问题/问题总结:

  • vue安装其依赖项后找不到该命令
  • yarn run serve尝试在 vagrant box 内运行时,纱线会吐出权限问题
  • 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

vagrant box 的配置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 项目文件夹并yarn run serve在 vagrant ssh 中运行时,我收到以下错误:

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 安装文档所示
注意: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 应用程序)。

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

4

2 回答 2

1

临时解决方法: - 受这篇文章的启发

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

对于有类似问题的任何人,这是我目前对这个问题的解决方法(帮自己一个忙,阅读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

旧答案 - 不起作用:我现在使用的解决方案取自这里:来源

将此添加到 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

于 2018-08-29T14:02:32.203 回答
0

sudo安装时需要用到vue-cli

https://cli.vuejs.org/guide/installation.html上的vue-cli文档指出:

要安装新软件包,请使用以下命令之一。您需要管理员权限才能执行这些操作,除非通过 Node.js 版本管理器(例如 n 或 nvm)在您的系统上安装了 npm。

npm install -g @vue/cli
# OR
yarn global add @vue/cli
于 2019-07-01T10:15:12.130 回答