[实操]发布Vuejs项目_持续更新。。。

文件名称	版本号	qq	备注
实操-发布Vuejs项目v0.0.1_持续更新。。。	v0.0.1	8416837	前后端分离之前端

---

构建

# 在项目根目录执行
cnpm run build:prod

在根目录生成了一个dist，里面就是静态文件。
但是这样和源码混在一起了，不合适，于是修改vue.config.js,改为outputDir: '../dist',再次build，dist就跑到根目录外面去了。


体积比较大，可以考虑进一步压缩,技术：gzip。

Nginx配置-文档参见笔者的博文

进入nginx conf目录，更新配置文件，

vim nginx.conf

内容

  1 server{
  2   listen 9528;  #监听的端口
  3   server_name localhost; #监听的域名
  4   location / {
  5   root /home/project/vue/html/dist; #网站所在路径
  6   index index.html; #默认的首页文件,好似单页入口
  7   }     
  8 }

将上文的dist.zip上传后，解压到/home/project/vue/html/，这里会增加自动化部署。
访问http://192.168.xx.xxx:9528/index.html，出现了页面：

简单部署成功

点击登录时，发现报错了：

Uncaught SyntaxError: Unexpected token } in JSON at position 46
    at JSON.parse (<anonymous>)
    at c (app.cd22f8bd.js:1)
    at Object.template (app.cd22f8bd.js:1)

报错和mock相关，但是生产已经不需要mock数据了。
报错在这句：

JSON.parse('{"'+decodeURIComponent(t).replace(/"/g,'\\"').replace(/&/g,'","').replace(/=/g,'":"').replace(/\+/g," ")+'"}'):

既然和mock相关，就根据蛛丝马迹寻找，在框架发现了这一句注释：

上线之前，请删除mock，于是注释掉mock

// import { mockXHR } from '../mock'
// if (process.env.NODE_ENV === 'production') {
//   mockXHR()
// }

并且修改环境配置：

lintOnSave: process.env.NODE_ENV === 'production',
// lintOnSave: process.env.NODE_ENV === 'development',

重新部署，成功了。注：勿须重启nginx。