vueSSR: 从0到1构建vueSSR项目 — 开发环境的部署

26次阅读

共计 1147 个字符,预计需要花费 3 分钟才能阅读完成。

开发环境的部署
开发环境的部署,让我头疼了一阵子每次修改代码都要重新构建这样很麻烦,最终利用 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