搭建Vue + Vagrant 开发环境

作者: 仅此而已004 | 来源:发表于2017-09-14 17:54 被阅读461次

搭建Vue + Vagrant 开发环境
vagrant搭建vue开发环境
学习Docker的一些工具
前端环境搭建
vagrant搭建开发环境
Vagrant开发环境搭建
Mac上搭建vue环境
Vagrant
Vue
Vue之ToDoList实战

1. 搭建Vagrant的Vue环境

1.1 安装 Vagrant 环境

Vagrant 的安装方法这里就不在详细讲解了，网上有很多自行参考。

1.2 下载 Vagrant box 并初始化Vagrant 环境

首先推荐一下一个网站：http://www.vagrantbox.es 。在这里有很多的 box 大家需要自行下载。

按照以下命令，安装box
1.  # vagrant box add ubuntu https://github.com/jose-lpa/packer-ubuntu_lts/releases/download/v3.1/ubuntu-16.04.box
2.  # mkdir ~/Desktop/vue && mkdir ~/Desktop/data && cd ~/Desktop/vue
3.  # vagrant init ubuntu  （此时你能看到当前目录下生成了一个 Vagrantfile 文件）
4.  用以下的Vagrantfile 文件内容替换当前的Vagrantfile 文件
5.  # vagrant up (国内网络环境不太好，可能比较慢)
6.  # vagrant ssh (进入vagrant 内)

Vagrantfile 文件

Vagrant.configure("2") do |config|
 config.vm.box = "ubuntu"
 config.vm.box_check_update = false
 config.vm.network "forwarded_port", guest: 8080, host: 8080, host_ip: "127.0.0.1"
 config.vm.network "forwarded_port", guest: 3000, host: 3000, host_ip: "127.0.0.1"
 config.ssh.insert_key = false
 config.vm.synced_folder "./data", "/home/vagrant/vagrant_data"
 config.vm.provision "shell", inline: <<-SHELL
   apt-get update
   apt-get install wget
   curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
   sudo apt-get install nodejs
   sudo npm install -g npm
   sudo npm config set registry https://registry.npm.taobao.org
   sudo npm install vue
   sudo npm install --global vue-cli
   sudo npm config set registry https://registry.npm.taobao.org
 SHELL
end

vagrant 的一些常用命令

（1）vagrant init # 初始化
（2）vagrant up # 启动虚拟机
（3）vagrant halt # 关闭虚拟机
（4）vagrant reload # 重启虚拟机
（5）vagrant ssh # SSH 至虚拟机
（6）vagrant status # 查看虚拟机运行状态
（7）vagrant destroy # 销毁当前虚拟机

1.3 校验vagrant的vue环境是否安装成功

如果显示如下信息则成功。

vagrant@ubuntu:~$ nodejs -v
v6.11.3
vagrant@ubuntu:~$ npm -v
5.4.1
vagrant@ubuntu:~$ vue -V
2.8.2
vagrant@ubuntu:~$

1.4 工作目录的简单介绍

经过以上步骤，其实大家可能已经发现了在宿主机的vue文件夹下有一个data 文件夹，在vagrant内部的 /home/vagrant/ 目录下有 vagrant_data 文件夹。这两个文件夹是数据互通的。我们后续的开发工作便在这两个文件夹中。

2. 初始化Vue项目环境

这一部分的内容和Vue官网介绍的内容相同。仅仅总结一下

2.1 创建Vue 项目

vagrant@ubuntu:~/vagrant_data$ npm config set registry https://registry.npm.taobao.org
vagrant@ubuntu:~/vagrant_data$ npm config get registry
https://registry.npm.taobao.org/
vagrant@ubuntu:~/vagrant_data$ vue init webpack vue-project

? Project name vue-project
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

  vue-cli · Generated "vue-project".

  To get started:

    cd vue-project
    npm install
    npm run dev

  Documentation can be found at https://vuejs-templates.github.io/webpack

vagrant@ubuntu:~/vagrant_data$

image.png

2.2 进入vue 项目并运行

命令：
vagrant@ubuntu:~/vagrant_data$ cd vue-project/
vagrant@ubuntu:~/vagrant_data/vue-project$ npm install
vagrant@ubuntu:~/vagrant_data/vue-project$ npm run dev

效果图：
vagrant@ubuntu:~/vagrant_data$ cd vue-project/
vagrant@ubuntu:~/vagrant_data/vue-project$ ls
build  config  index.html  package.json  README.md  src  static  test
vagrant@ubuntu:~/vagrant_data/vue-project$ npm install

> phantomjs-prebuilt@2.1.15 install /home/vagrant/vagrant_data/vue-project/node_modules/phantomjs-prebuilt
> node install.js

PhantomJS not found on PATH
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-linux-x86_64.tar.bz2
Saving to /tmp/phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2
Receiving...
 [========================================] 99%
Received 22866K total.
Extracting tar contents (via spawned process)
Removing /home/vagrant/vagrant_data/vue-project/node_modules/phantomjs-prebuilt/lib/phantom
Copying extracted folder /tmp/phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2-extract->1505378871593/phantomjs-2.1.1-linux-x86_64 -> /home/vagrant/vagrant_data/vue->project/node_modules/phantomjs-prebuilt/lib/phantom
Writing location.js file
Done. Phantomjs binary available at /home/vagrant/vagrant_data/vue-project/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs

> chromedriver@2.32.2 install /home/vagrant/vagrant_data/vue-project/node_modules/chromedriver
> node install.js

Downloading https://chromedriver.storage.googleapis.com/2.32/chromedriver_linux64.zip
Saving to /tmp/chromedriver/chromedriver_linux64.zip
Received 781K...
Received 1568K...
Received 2352K...
Received 3136K...
Received 3920K...
Received 3978K total.
Extracting zip contents
Copying to target path /home/vagrant/vagrant_data/vue-project/node_modules/chromedriver/lib/chromedriver
Fixing file permissions
Done. ChromeDriver binary available at /home/vagrant/vagrant_data/vue->project/node_modules/chromedriver/lib/chromedriver/chromedriver
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1297 packages in 205.973s
vagrant@ubuntu:~/vagrant_data/vue-project$ npm run dev

> vue-project@1.0.0 dev /home/vagrant/vagrant_data/vue-project
> node build/dev-server.js

> Starting dev server...


DONE  Compiled successfully in 6518ms                                                                             8:53:55 AM

> Listening at http://localhost:8080

(node:13627) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3

2.3 运行效果

在宿主机的浏览器上输入 http://127.0.0.1:8080/#/ 出现如下效果图则代表成功。

image.png

3. 开发环境配置

前端开发工具 WebStrom
在宿主机上按照如下图解进行配置

新建一个空项目
设置同步部署方式（1）
设置同步部署方式（2）
设置同步部署方式（3）
设置同步部署方式（4）
同步vagrant 内部的代码
设置宿主机文件自动同步到vagrant中，来保证vue热更的正常的运行

到此，大家可以愉快的开发了。