renderToString
渲染器
Vue SSR集合到Web服务器
使用node express框架 npm i express
使用HTML模板
在模板中使用外部数据
同构渲染的流程
构建配置
依赖
webpack配置文件
webpack.base.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const path = require('path')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const resolve = file => path.resolve(__dirname, file)
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
mode: isProd ? 'production' : 'development',
output: {
path: resolve('../dist/'),
publicPath: '/dist/',
filename: '[name].[chunkhash].js'
},
resolve: {
alias: {
'@': resolve('../src/')
},
extensions: ['.js', '.vue', '.json']
},
devtool: isProd ? 'source-map' : 'cheap-module-eval-source-map',
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader',
],
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
]
},
plugins: [
new VueLoaderPlugin(),
new FriendlyErrorsWebpackPlugin()
]
}
webpack.client.config.js
const { merge } = require('webpack-merge')
const baseConfig = require('./webpack.base.config.js')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
module.exports = merge(baseConfig, {
entry: {
app: './src/entry-client.js'
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
cacheDirectory: true,
plugins: ['@babel/plugin-transform-runtime']
}
}
},
]
},
optimization: {
splitChunks: {
name: "manifest",
minChunks: Infinity
}
},
plugins: [
new VueSSRClientPlugin()
]
})
webpack.server.config.js
const { merge } = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack.base.config.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
module.exports = merge(baseConfig, {
entry: './src/entry-server.js',
target: 'node',
output: {
filename: 'server-bundle.js',
libraryTarget: 'commonjs2'
},
externals: [nodeExternals({
allowlist: [/\.css$/]
})],
plugins: [
new VueSSRServerPlugin()
]
})
构建命令
构建配置开发模式 --客户端
使用webpack-hot-middleware实现热更新
npm i webpack-hot-middleware -D
Vue Meta
是一个支持ssr的第三方vuejs插件,通过这个插件可以轻松实现不同页面的head内容管理,具体使用方法看官网