Vue.js 生产打包上线实战

项目管理后台采用Vue.js 架构，开发完毕后设计到打包上传到服务器发布。

发布成功后，总结出主要要决绝两个主要问题：

1.打包前，环境设置

2.上传到服务器，直接放在Tomcat中出现跨域访问问题。

此次项目实际处理方法为：

一、打包

有人说需要再config文件夹中index.js中 所以

assetsPublicPath: '/', 改为

assetsPublicPath: './',

其实这是不需要的，因为生产环境打包时，这里根本不会包含进入，这里只用于本地开发环境，vue.js本地产生的服务用于跨域转发，解决跨域访问产生的问题。

module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/zpin/*':{// 本地开发环境设置// target:'http://localhost:8081',// 本地开发环境连接服务器生产环境target:'http://www.yi********.com:8081',changeOrigin:true,pathRewrite:{'^/zpin': '/zpin'}}},

包括在build 文件中的 uils.js 中 添加 

if (options.extract) {return ExtractTextPlugin.extract({use: loaders,// 这里是不需要添加的，除非你对默认目录做了大的修改// publicPath:'../../',fallback: 'vue-style-loader'})
}

 如果你在最后和跨域问题一并解决后，其实只需要更改一处，就是修改axios库的baseurl地址即可，我的设置文件是这样的

let base = ''//本地测试环境let base = 'http://besu.******.com'//打包前设置
export const postRequest = (url, params) => {return axios({method: 'post',url: `${base}${url}`,data: params})
}export const putRequest = (url, params) => {return axios({method: 'put',url: `${base}${url}`,data: params})
}

修改完成后直接  npm run build  进行打包

打包完成后用FileZilla 上传到服务器存放目录中，至此打包完成，发布完成。

二、解决跨域错误

如果你不用Nginx做反向代理的话，无论你前端是这样的设置

axios.defaults.withCredentials = true
axios.defaults.headers = {'Content-Type': 'application/json;charset=utf-8','Access-Control-Allow-Credentials': 'true','Access-Control-Allow-Origin': `http://www.*******.com`,'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, DELETE, PUT','Access-Control-Allow-Headers': 'x-requested-with, Content-Type, origin, authorization, accept, client-security-token'
}

还是后台进行跨域设置，短时间内很难解决，出现错误多多，要想快速轻松解决，就必须用Nginx做反向代理。

Nginx配置文件设置内容为：

http {include       mime.types;default_type  application/octet-stream;#log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '#                  '$status $body_bytes_sent "$http_referer" '#                  '"$http_user_agent" "$http_x_forwarded_for"';#access_log  logs/access.log  main;sendfile        on;#tcp_nopush     on;#keepalive_timeout  0;keepalive_timeout  65;#gzip  on;//网站server {listen       80;server_name  www.*******.com;#server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;location / {root   /usr/local/tomcat/webapps/ymys;index  index.html index.htm;}}//管理后台server {listen        80;server_name   besu.*****.com;location  / {root   /usr/local/ymysweb/dist;index  index.html customer.html media.html;}#跨域 ip和port自行替换location /zhpin {proxy_pass http://101.200.12.18:8081;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}

编辑完毕保存后 nginx -s rolad 既可生效 

在浏览器中数据访问地址，成功进入登录页面，登录有各个页面接口请求不再有跨域及其他错误。

切记在build 文件中的 uils.js 中不要添加 publicPath:'../../' ，否则刷新页面会出现白板的问题。

到此，全部完成，是不是很简单！