脚本宝典收集整理的这篇文章主要介绍了vueSSR: 从0到1构建vueSSR项目 --- node以及vue-cli3的配置,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
上一次做了路由的相关配置,原本计划今天要做vuex部分,但是想了想,发现vuex单独的客户端部分穿插解释起来很麻烦,所以今天改做服务端部分。
服务端部分做完,再去做vuex的部分,这样就会很清晰。
vue ssr是分两个端,一个是客户端,一个是服务端。
所以要做两个cli3的配置。
那么下面就直接开始做吧。
//package.json :client代表客户端 :server代表服务端
//使用VUE_NODE来作为运行环境是node的标识
//cli3内置 命令 --no-clean 不会清除dist文件
"scripts": {
"serve:client": " vue-cli-service serve",
"build":"npm run build:server -- --silent && npm run build:client -- --no-clean --silent",
"build:client": "vue-cli-service build",
"build:server": "cross-env VUE_NODE=node vue-cli-service build",
"start:server": "cross-env NODE_ENV=production nodemon nodeScript/index"
}
添加完相关脚本命令之后,我们开始改造cli3配置。
首先要require('vue-server-renderer')
然后再根据VUE_NODE环境变量来决定编译的走向以及生成不同的环境清单
先做cli3服务端的入口文件
// src/entry/server.js
import {
createApp
} from '../main.js'
export default context => {
return new Promise((resolve, reject) => {
const {
app,
router
} = createApp(context.data)
//根据node传过来的路由 来调用router路由的指向
router.push(context.url)
router.onReady(() => {
//获取当前路由匹配的组件数组。
const matchedComponents = router.getMatchedComponents()
//长度为0就是没找到该路由所匹配的组件
//可以路由设置重定向或者传回node node来操作也可以
if (!matchedComponents.length) {
return reject({
code: 404
})
}
resolve(app)
}, reject)
})
}
这里是cli3的配置
//vue.config.js
const ServerPlugin = require('vue-server-renderer/server-plugin'),//生成服务端清单
ClientPlugin = require('vue-server-renderer/client-plugin'),//生成客户端清单
nodeExternals = require('webpack-node-externals'),//忽略node_modules文件夹中的所有模块
VUE_NODE = process.env.VUE_NODE === 'node',
entry = VUE_NODE ? 'server' : 'client';//根据环境变量来指向入口
module.exports = {
css: {
extract: false//关闭提取css,不关闭 node渲染会报错
},
configureWebpack: () => ({
entry: `./src/entry/${entry}`,
output: {
filename: 'js/[name].js',
chunkFilename: 'js/[name].js',
libraryTarget: VUE_NODE ? 'commonjs2' : undefined
},
target: VUE_NODE ? 'node' : 'web',
externals: VUE_NODE ? nodeExternals({
//设置白名单
whitelist: /.css$/
}) : undefined,
plugins: [//根据环境来生成不同的清单。
VUE_NODE ? new ServerPlugin() : new ClientPlugin()
]
}),
chainWebpack: config => {
config.resolve
.alias
.set('vue$', 'vue/dist/vue.esm.js')
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.optimizeSSR = false;
return options;
});
config.module
.rule('images')
.use('url-loader')
.tap(options => {
options = {
limit: 1024,
fallback:'file-loader?name=img/[path][name].[ext]'
}
return options;
});
}
}
用于node渲染 必然要拦截get请求的。然后根据get请求地址来进行要渲染的页面。
官方提供了vue-server-renderer插件
大概的方式就是 node拦截所有的get请求,然后将获取到的路由地址,传给前台,然后使用router实例进行push
再往下面看之前 先看一下官方文档
创建BundleRenderer
createBundleRenderer
将 Vue 实例渲染为字符串。
renderToString
渲染应用程序的模板
template
生成所需要的客户端或服务端清单
clientManifest
先创建 服务端所需要的模板
//public/index.nodeTempalte.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<meta charset="utf-8">
<title>vuessr</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
node部分
先创建三个文件
index.js //入口
proxy.js //代理
server.js //主要配置