第一步：Vue项目的搭建
1：首先需要安装node.js和npm
打开cmd命令行，首先安装node
步骤：https://nodejs.org/en/download/ node官网，选择跟自己的电脑匹配的版本进行下载，然后一步步的安装即可，输入node -v，如果出现版本信息即表示安装成功。（附百度网盘链接链接：https://pan.baidu.com/s/1_tTMryRtsTnIJ4vAI_ZMkg 密码：3zc0）
2：npm包管理器是集成在node中的，所以直接输入npm -v就能查看到版本信息
3：安装vue（npm install -g vue-cli –registry=https://registry.npm.taobao.org）
4：输入npm install -g cnpm –registry=http://registry.npm.taobao.org ，安装淘宝镜像安装相关依赖
5：安装vue-cli脚手架构建工具，输入命令 npm install -g vue-cli，安装完成即可。
6：选定路径，新建vue项目
7：进入上一步得目录下新建项目，指令vue init webpack +项目名称
（依次按照提示输入，项目名、项目描述、项目作者等等，最后这个项目就创建好了）
8：进入到项目的文件夹下
9：运行项目，指令npm run dev
10:在浏览器中打开这个网址，就能看到
第二步： 项目的配置
1.在文件生成时候会默认生成config文件夹，在文件夹下面会有项目的各种配置信息
在index文件中，可以设置本地访问路径和外部访问路径，本地访问路径为和端口默认设置‘localhost 和 8080，如果需要改动只可将本地路径和端口号改变即可，文件代码为（host: ‘localhost’, port: 8080, ）
设置外部访问时候需要在proxyTable中设置，源代码为
proxyTable: {
'/api': {
target: 'http://localhost:8000/', //（这里是代理接口的位置）
changeOrigin: true, //（允许跨域，如果这不写，调用接口接口时会有跨域错误说缺少请求头）
pathRewrite: {'^/api': '' } //（路由规则下面详细介绍）
}
},其中/api 为在请求路由中如果含有api时候默认请求代理接口，否则默认请求本机接口
2.在设置完index文件之后，在其他三个文件同样也需要设置端口，在开发测试环境中，都需要将端口设为同代理端口
代码事例如下：
dev.env.js
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST: '"http://localhost:8000"' // 开发环境接口地址(这里是增加的内容)
})
Prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"',
API_HOST: '"http://localhost:8000"' // 正式环境接口地址(这里是增加的内容)
}
test.env.js
const merge = require('webpack-merge')
const devEnv = require('./dev.env')
module.exports = merge(devEnv, {
NODE_ENV: '"testing"'
})
dev.env.js里面是开发环境的变量
prod.env.js里面是生产环境的变量。
test.env.js里面是测试环境的变量。第三步：Vue项目的发布
1.先从网上拉去一个nginx镜像，在这里我拉取的是163的镜像（docker pull hub.c.163.com/library/nginx）
2.配置dockerfile，其中dockerfile在根目录下面，
使用Nginx
FROM hub.c.163.com/library/nginx liuze
MAINTAINERliuze
server {
listen 8080; # 监听端口8080
server_name 192.168.99.100;
#charset koi8-r;
#access_log /var/log/nginx/log/host.access.log main;
location / {
try_files $uri $uri/ /index.html;
root /usr/share/nginx/html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
4.在发起网络请求是会有vue项目请求和网络请求：
在中间件配置文件中可以进行请求url重新定向，发送请求是网络请求可以在请求前加上api，当请求中含有api时候请求将会被替换成网络端口
Axios.interceptors.request.use(
config => {
config.url = config.url.replace(‘/api’,‘http://0.0.0.1:8010’) # 将含有api的字段替换
let tbkt_token = localStorage.getItem("Token") || '';
if(tbkt_token) config.headers['Token'] = tbkt_token;
return config
},
err => {
return Promise.reject(err)
}
);
最后附上本人github demo（https://github.com/liuzemeeting/VueTest.git）