Node部署vue项目做服务端渲染，测试到上线流程
为什么使用服务端渲染？
后端提供的接口所返回的数据格式有时候太适合前端直接使用，这些处理虽可以放在前端来进行，但也许数据量一大便会浪费浏览器性能。因而现今，增加node端便是一种良好的解决方案。
客户端渲染路线：
1. 请求一个html
2. 服务端返回一个html
3. 浏览器下载html里面的js/css文件
4. 等待js文件下载完成
5. 等待js加载并初始化完成
6. js代码终于可以运行，由js代码向后端请求数据( ajax/fetch )
7. 等待后端数据返回
8. dom( 客户端 )从无到完整地，把数据渲染为响应页面
服务端渲染路线：
1. 请求一个html
2. 服务端请求数据( 内网请求快 )
3. 服务器初始渲染（服务端性能好，较快）
4. 服务端返回已经有正确内容的页面
5. 客户端请求js/css文件
6. 等待js文件下载完成
7. 等待js加载并初始化完成
8. ( 客户端 )把剩下一部分渲染完成( 内容小，渲染快 )
时间耗时比较：
1. 数据请求：由服务端请求数据而不是客户端请求数据，这是“快”的一个主要原因。服务端在内网进行请求，数据响应速度快。客户端在不同网络环境进行数据请求，且外网http请求开销大，导致时间差（主要原因）。
2. 步骤：服务端是先请求数据然后渲染“可视”部分，而客户端是等待js代码下载、加载完成再请求数据、渲染。即：服务端渲染不用等待js代码下载完成再请求数据，并会返回一个已经有内容的页面。
3. 渲染性能：服务端性能比客户端高，渲染速度快( 猜测，该项数据不详 )。
4. 渲染内容：服务端渲染会把”可视“部分先渲染，然后交给客户端再作部分渲染。而客户端渲染，则是从无到有，需要经历完整的渲染步骤。
第一步：vue-cli3.0安装
npm install -g @vue/clivue create my-vue //创建项目
第一个是默认配置，一般选第二个，自己配置，这里选择最后一个
选择哪一个，按空格键确定，所有的都选择好后，按enter键进行下一步，这里
下一步之后问询问你安装哪一种 CSS 预处理语言，你随意选择，我是一直用的less
上面这个是问你选择哪个自动化代码格式化检测，配合vscode编辑器的 Prettier - Code formatter插件，我选的随后一个
第一个是：放独立文件放置 第二个是：放package.json里 这里推荐放单独配置文件
第二步：express框架搭建
1、安装node
2、安装express:npm install -g express
3、安装npm install -g express-generator
4、创建一个express工程：express helloworld
5、进入项目主目录：cd helloworld
6、安装必备包：npm install
7、启动express程序：npm start
第三步：修改vue.config.js:打包文件到指定位置
第四步：修改node-express里面的app.js
第五步：
1、设置node允许跨越：https://blog.****.net/lbPro0412/article/details/84767678
2、项目打包完 =》启动node 刷新页面出现404 解决方法：https://blog.****.net/lbPro0412/article/details/82501440
第六步：vue配置环境变量
1、
2、
3、运行命令 npm run build -- test 运行结果
4、获取环境变量的值
注意：
（1）、在项目中，也就是src中使用环境变量的话，必须以VUE_APP_开头，见.env.test文件
（2）、新建的文件.env.test文件必须有NODE_ENV="production"，否则打包的文件名字没有hash值
本地启动命令也能配置环境变量：
第七步：配置node服务端环境变量，这里借助的事pm2
1、运行命令：pm2 delete mypractice.json && pm2 start mypractice.json --env test
2、环境变量获取：
打印：
3、这里使用request去请求接口，然后返回给客户端
如果不封装方法，可参考：https://blog.****.net/lbPro0412/article/details/82285841
如果封装方法，见下面：
调用：
注意：
get请求获取参数是req.query
post请求获取参数是req.body
项目地址：https://github.com/binliuli/node_vue
仅供参考，有问题欢迎指出。。。。。