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

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

构建

  • 预处理
    修改配置,在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 # 当前环境
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值