这是一篇教程,从创建项目到改造项目
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