Node部署vue项目做中间件,测试到上线流程

为什么使用服务端渲染?

客户端渲染路线:

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/cli
vue 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.csdn.net/lbPro0412/article/details/84767678

2、项目打包完 =》启动node 刷新页面出现404  解决方法:https://blog.csdn.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.csdn.net/lbPro0412/article/details/82285841

如果封装方法,见下面:

调用:

注意:

get请求获取参数是req.query

post请求获取参数是req.body

项目地址:https://github.com/binliuli/node_vue

仅供参考,有问题欢迎指出。。。。。

猜你喜欢

转载自blog.csdn.net/lbPro0412/article/details/86720175