修改vue项目到服务器端渲染,vue-server-renderer实现vue项目改造服务端渲染

这是一篇教程，从创建项目到改造项目

vue-cli创建一个项目

在放你做demo的地方，创建一个项目vue create vue-ssr

// 如果你安装了vue-cli4，选择vue2的版本，以下的改进过程是按vue2来做的

经过漫长的等待，下载好文件开始我们的改造之路

文件目录

进入vue-ssr文件夹，使用命令vue ui

把vue-router装上

先安装几个依赖插件// 安不上用cnpm，yarn，npx

npm i vue-server-renderer express -D

npm install webpack-node-externals lodash.merge -D

npm i cross-env -D

修改package.json文件"scripts": {

"serve": "vue-cli-service serve",

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

"lint": "vue-cli-service lint"

}

改成

"scripts": {

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

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

"build": "npm run build:server && npm run build:client"

}

根目录下创建vue.config.js// 服务器渲染的两个插件，控制server和client

const VueSSRServerPlugin = require("vue-server-renderer/server-plugin"); // 生成服务端包

const VueSSRClientPlugin = require("vue-server-renderer/client-plugin"); // 生成客户端包

const nodeExternals = require("webpack-node-externals");

const merge = require("lodash.merge");

// 环境变量：决定入口是客户端还是服务端，WEBPACK_TARGET在启动项中设置的，