vue ssr项目部署到服务器,vueSSR: 从0到1构建vueSSR项目 --- 开发环境的部署

开发环境的部署

开发环境的部署,让我头疼了一阵子每次修改代码都要重新构建这样很麻烦,最终利用node脚本解决了这个问题。

思路

使用node执行脚本文件 调用 “npm命令” 来进行执行命令,然后监听需要监听的文件,发生改动时,则重新执行脚本。

效果就是代码改动保存时,就会进行重新构建,瑕疵就是无法自动刷新浏览器(思路已经想好了)

构建完成,或者代码改动构建完成时浏览器刷新

构建完成时,刷新浏览器的思路(这个我就不做了)

当完成构建利用WebSocket向前端发送通信然后执行reload。就实现了每次构建完成时刷新浏览器。

当前环境 判断 process.env.NODE_ENV即可。

实现代码

根目录创建bin

// vuessr/bin/index.js

var npm = require('npm');

//看不懂,就打印下npm 就懂了。

npm.load(function(){

//一定要清除。

npm.commands.cache(['clean'], function(){

npm.commands.run(['serve'])

});

})

//package.json

"scripts": {

//node脚本执行的命令

"serve": "npm run build && node nodeScript/index",

//开发环境服务

"serve:client": "node nodeScript/index",

"build": " npm run build:server -- --silent && npm run build:client -- --no-clean --silent",

//打包客户端代码

"build:client": "vue-cli-service build",

//打包服务端使用的json

"build:server": "cross-env VUE_NODE=node vue-cli-service build",

//开发环境

"start": "cross-env NODE_ENV=development nodemon bin/index",

//本地测试服务器的环境

"start:server": "cross-env NODE_ENV=production nodemon nodeScript/index",

//服务器

"pm2": " cross-env NODE_ENV=production pm2 start nodeScript/index.js --watch"

}

vuessr到这里就完结了。

总结,坑很多,就不一一列举了。

瑕疵: 开发环境,代码修改时重新构建也会重启服务,暂时没有思路怎么只重新构建不重启服务。(不想开两个cmd窗口)。

问题来源: 开启node服务必须要等到代码构建完毕,否则node服务是会报错的,因为需要依赖代码构建完成后的json文件。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值