全稱：server side render（服務(wù)器端渲染），讓我們可以在服務(wù)器端渲染應(yīng)用程序
前端渲染問題：
1 白屏?xí)r間長，影響用戶體驗(yàn)
2 不利于搜索引擎優(yōu)化（SEO）
所以我們要在服務(wù)器端渲染應(yīng)用程序
服務(wù)器端渲染：vue為服務(wù)器端渲染提供了模板–vue-server-render
該模塊提供了createRenderer方法，來創(chuàng)建渲染器
渲染器提供了renderToString方法，渲染應(yīng)用程序組件
渲染器實(shí)現(xiàn)了promise規(guī)范，因此可以通過then方法監(jiān)聽成功，可以通過cache方法監(jiān)聽失敗
渲染模板：想在模板中渲染應(yīng)用程序分成兩步：
第一步 在createRenderer方法中，通過template引入模板文件
第二步 在模板文件中，通過 定義應(yīng)用程序渲染位置
前后端同步渲染
瀏覽器端渲染（前端）：
1 白屏?xí)r間長，影響用戶體驗(yàn) 2 不利于SEO優(yōu)化
服務(wù)器端渲染（后端）：
無法綁定交互
為了解決瀏覽器端與服務(wù)器端渲染的問題，我們要使用前后端同步渲染技術(shù)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!-- 定義渲染位置 --> <!-- 注意，不要添加空格 --> <!--vue-ssr-outlet--></body></html>// 引入vuelet Vue = require('vue');// 實(shí)例化module.exports = new Vue({ template: ` <div> <h1 @click="clickH1">hello {{msg}}</h1> </div> `, data: { msg: 'test' }, methods: { // 服務(wù)器端渲染無法綁定交互,所以此點(diǎn)擊事件不會生效 clickH1() { console.log('click h1'); } },})// 引入expresslet express = require('express');// 引入ejslet ejs = require('ejs');// 引入vue在服務(wù)器端的渲染器let { createRenderer } = require('vue-server-renderer');// 引入fslet fs = require('fs');// 引入pathlet path = require('path');// 引入組件let testApp = require('./test');// 獲取根目錄let root = process.cwd();// 創(chuàng)建渲染器let render = createRenderer({ // 同步讀取,引入模板文件 template: fs.readFileSync(path.join(root, './views/index.html'), 'utf-8')})// 定義應(yīng)用程序let app = express()// 拓展名app.engine('.html', ejs.__express)// 定義路由app.get('/', (req, res) => { // 渲染字符串 render.renderToString(testApp) .then( // 渲染成功 data => res.end(data), // 渲染失敗 err => console.log('fail', err) )})// 監(jiān)聽端口號app.listen(3000)此時,就將組件渲染出來了,但是沒有交互
前端渲染
是為了給用戶使用，因此希望資源加載的塊（壓縮，打包，添加指紋等等）
為了更好的效果，我們要加載樣式；為了看到頁面，我們要處理模板等，。。。
但是服務(wù)器端渲染不需要考慮這些問題，只需要一個應(yīng)用程序組件，并最終將其渲染成字符串
因此前后端渲染有不同的入口文件，有不同的webpack配置
有不同的入口文件
前端入口文件，要讓應(yīng)用程序組件上樹；后端入口文件，只需要一個應(yīng)用程序組件
不同的webpack配置
前端要考慮樣式，模板，性能優(yōu)化（壓縮，打包，添加指紋等）等
后端只要將ES Module規(guī)范，編譯成CommonJS規(guī)范即可
config 存儲配置文件
home 前端開發(fā)的項(xiàng)目
views 模板目錄
static 靜態(tài)資源
app.js 服務(wù)器入口文件
1 不需要模板，不用寫html插件
2 不需要樣式，不用寫style-loader,不需要拆分樣式
3 不需要性能優(yōu)化、拆分模塊，添加指紋，服務(wù)器端本地引入文件，因此打包在一起就可以了
4 通過target:node配置，說明給node使用
5 在output.libraryTarget:commonjs2，將ES Module規(guī)范轉(zhuǎn)成commonjs規(guī)范
6 使用vue-server-renderer插件，發(fā)布json文件
在參數(shù)對象中，通過filename屬性，可以自定義json文件的發(fā)布位置
為了使用發(fā)布的json文件，vue-server-render提供了createBundleRenderer方法
第一個參數(shù)表示json文件
第二個參數(shù)表示配置對象
template定義模板文件的位置
插值語法：vue服務(wù)器端渲染允許我們在渲染頁面的時候，向頁面中插入一些數(shù)據(jù)
在renderToString方法中傳遞數(shù)據(jù)
在模板中，通過插值語法插入數(shù)據(jù)
{{}} 渲染文本插值
{{{}}} 渲染標(biāo)簽插值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>// 渲染位置 <!--vue-ssr-outlet--></body></html><template><div id="app"> <h1 @click="clickH1">app part -- {{msg}}-- {{$store.state.num}}</h1></div></template><script>export default { data() { return { msg: 'hello' } }, methods: { clickH1() { console.log('click h1'); } }}</script>import Vue from 'vue';// 引入應(yīng)用程序import App from './App';// 引入storeimport store from './store'// 引入樣式import './style.scss';export default new Vue({ // 訂閱 store, // 渲染應(yīng)用程序 render: h => h(App)})// 引入vue實(shí)例化對象,引入main.jsimport app from './main';// 上樹app.$mount('#app');import app from './main';服務(wù)器端不需要上樹// 暴露接口export default app;{ "scripts": { "client": "webpack --config ./config/webpack.client.js", "start:client": "webpack -w --config ./config/webpack.client.js", "serve": "webpack --config ./config/webpack.server.js", "start:serve": "webpack -w --config ./config/webpack.server.js", "start": "npm run client && npm run server" }}// 引入pathlet path = require('path')// vue插件let { VueLoaderPlugin } = require('vue-loader');// 引入html插件let HtmlWebpackPlugin = require('html-webpack-plugin');// 拆分csslet MiniCssExtractPluin = require('mini-css-extract-plugin')// 壓縮csslet OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');// 獲取根目錄const root = process.cwd();module.exports = { // 模式 mode: 'production', // 解決問題 resolve: { // 別名 alias: { vue$: 'vue/dist/vue.js', '@': path.join(root, './home/src'), '@v': path.join(root, './home/src/views'), '@c': path.join(root, './home/src/components') }, // 擴(kuò)展名 extensions: ['.js', '.vue'] }, // 入口 entry: './home/src/entry-client.js', // 發(fā)布 output: { filename: 'static/[name].js', // 發(fā)布的相對位置位置 path: root, // 修改進(jìn)入靜態(tài)文件的相對位置 publicPath: '/' }, // 模塊 module: { // 加載機(jī) rules: [ // vue { test: /\.vue$/, loader: 'vue-loader' }, // css { test: /\.css$/, use: [ // 'style-loader', // 1 在樣式文件的style-loader后面添加loader MiniCssExtractPluin.loader, 'css-loader' ] }, // less { test: /\.less$/, use: [ // 'style-loader', MiniCssExtractPluin.loader, 'css-loader', 'less-loader' ] }, // scss { test: /\.scss$/, use: [ // 'style-loader', MiniCssExtractPluin.loader, 'css-loader', 'sass-loader' ] } ] }, // 插件 plugins: [ // 使用vue加載機(jī)需要引入插件 new VueLoaderPlugin(), // 處理模板 new HtmlWebpackPlugin({ // 模板位置 template: './home/public/index.html', // 模板文件發(fā)布位置 filename: './views/index.html', // 添加指紋 hash: true, // 優(yōu)化 防止<!--vue-ssr-outlet-->被壓縮 minify: { collapseWhitespace: true, // 取消移除注釋 removeComments: false, removeRedundantAttributes:true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, useShortDoctype: true } }), // 2 定義文件發(fā)布的位置 new MiniCssExtractPluin({ filename: 'static/style.css' }), // 壓縮css new OptimizeCssAssetsPlugin() ], // 拆分庫文件 optimization: { // 拆分庫文件 splitChunks: { cacheGroups: { lib: { name: 'lib', chunks: 'initial', test: /node_modules/ } } } }}// 引入pathlet path = require('path')// vue插件let { VueLoaderPlugin } = require('vue-loader');// 引入服務(wù)器端渲染插件let VueServerRendererPlugin = require('vue-server-renderer/server-plugin');// 獲取根目錄const root = process.cwd();module.exports = { // 模式 mode: 'development', 通過target:node配置，說明給node使用 // .....告訴webpack給node使用 target: 'node', // 解決問題 resolve: { // 別名 alias: { vue$: 'vue/dist/vue.js', '@': path.join(root, './home/src'), '@v': path.join(root, './home/src/views'), '@c': path.join(root, './home/src/components') }, // 擴(kuò)展名 extensions: ['.js', '.vue'] }, // 入口 entry: './home/src/entry-server.js', // 發(fā)布 output: { filename: 'static/[name].js', // 發(fā)布的相對位置位置 path: root, // 修改進(jìn)入靜態(tài)文件的相對位置 publicPath: '/',在output.libraryTarget:commonjs2，將ES Module規(guī)范轉(zhuǎn)成commonjs規(guī)范 // ......編譯成commonjs規(guī)范 libraryTarget: 'commonjs2' }, // 模塊 module: { // 加載機(jī) rules: [ // vue { test: /\.vue$/, loader: 'vue-loader' }, // css { test: /\.css$/, use: [ 'css-loader' ] }, // less { test: /\.less$/, use: [ 'css-loader', 'less-loader' ] }, // scss { test: /\.scss$/, use: [ 'css-loader', 'sass-loader' ] } ] }, // 插件 plugins: [ // 使用vue加載機(jī)需要引入插件 new VueLoaderPlugin(), // 發(fā)布位置 將ES Module規(guī)范，編譯成CommonJS規(guī)范,輸出到bundle.json使用vue-server-renderer插件，發(fā)布json文件在參數(shù)對象中，通過filename屬性，可以自定義json文件的發(fā)布位置 new VueServerRendererPlugin({ filename: '/server/bundle.json' }) ]}// 引入expresslet express = require('express');// 引入ejslet ejs = require('ejs');let path = require('path');let fs = require('fs');const root = process.cwd();// 引入vuelet Vue = require('vue');// 引入vue在服務(wù)器端的渲染器let { createBundleRenderer } = require('vue-server-renderer');// 創(chuàng)建渲染器為了使用發(fā)布的json文件，vue-server-render提供了createBundleRenderer方法let renderer = createBundleRenderer(path.join(root, './server/bundle.json'), { // 傳遞模板 template: fs.readFileSync(path.join(root, './views/index.html'), 'utf-8')})// 定義應(yīng)用程序let app = express()// 拓展名app.engine('.html', ejs.__express)// 靜態(tài)化app.use('/static/', express.static(path.join(root, './static')))// 定義路由app.get('/', (req, res) => { 插值語法：vue服務(wù)器端渲染允許我們在渲染頁面的時候，向頁面中插入一些數(shù)據(jù)在renderToString方法中傳遞數(shù)據(jù) // 渲染 renderer.renderToString() .then( html => res.end(html), err => console.log(err) )})// 監(jiān)聽端口號app.listen(3000)