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

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

---

构建

• 预处理
  修改配置,在vue.config.js

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

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

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


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

二级路径|项目名访问

在vue.config.js修改配置

publicPath: '/', # 改为 publicPath: '/项目名',

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

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

vim nginx.conf

内容

server{
	listen 9528;  #监听的端口
	server_name localhost; #监听的域名
	location /项目名称英文 {  # 如果通过项目名称访问，这里要配上项目名称
	root /home/project/vue/html/项目名称; #项目所在路径（注意，这里有猫腻，如果通过项目名称访问，这个路径不含项目名称，如果你项目文件夹是abc，也就是说在/home/project/vue/html/里面放人abc文件夹）
	index index.html; #默认的首页文件,好似单页入口
	 }     
 }

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

外网访问

将Nginx的ip和监听的端口映射到外网端口，然后通过外网ip:端口/项目名称访问

简单部署成功

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

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。

环境变量

我使用的这个框架已经创建了配置文件：

分别对应：开发环境/生产环境/发布环境
其中一个文件如下：

# just a flag
ENV = 'production'
# base api
# 生产环境 打包命令： npm run build:prod
VUE_APP_BASE_API = 'http://www.domain.com'

引用里面的数据，使用以下代码：

process.env.VUE_APP_BASE_API # 后台API
process.env.NODE_ENV # 当前环境