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文件。

项目github地址
项目公网地址

1) vueSSR: 从0到1构建vueSSR项目 --- 初始化
2) vueSSR: 从0到1构建vueSSR项目 --- 路由的构建
3) vueSSR: 从0到1构建vueSSR项目 --- node以及vue-cli3的配置
4) vueSSR: 从0到1构建vueSSR项目 --- vuex的配置（数据预取）
5) vueSSR: 从0到1构建vueSSR项目 --- 开发环境的部署
6) vueSSR: 从0到1构建vueSSR项目 --- 伪热更新