任务一:搭建自己的SSR

173

renderToString

image.png

渲染器

image.png

image.png

Vue SSR集合到Web服务器

使用node express框架 npm i express

image.png

使用HTML模板

image.png

image.png

在模板中使用外部数据

image.png

image.png

image.png

同构渲染的流程

image.png

构建配置

依赖

image.png

webpack配置文件

image.png

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: {
       // 路径别名,@ 指向 src
       '@': 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',
         ],
       },
 
       // 处理 .vue 资源
       {
         test: /\.vue$/,
         loader: 'vue-loader'
       },
 
       // 处理 CSS 资源
       // 它会应用到普通的 `.css` 文件
       // 以及 `.vue` 文件中的 `<style>` 块
       {
         test: /\.css$/,
         use: [
           'vue-style-loader',
           'css-loader'
         ]
       },
       
       // CSS 预处理器,参考:https://vue-loader.vuejs.org/zh/guide/pre-processors.html
       // 例如处理 Less 资源
       // {
       //   test: /\.less$/,
       //   use: [
       //     'vue-style-loader',
       //     'css-loader',
       //     'less-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: [
       // ES6 转 ES5
       {
         test: /\.m?js$/,
         exclude: /(node_modules|bower_components)/,
         use: {
           loader: 'babel-loader',
           options: {
             presets: ['@babel/preset-env'],
             cacheDirectory: true,
             plugins: ['@babel/plugin-transform-runtime']
           }
         }
       },
     ]
   },
 
   // 重要信息:这将 webpack 运行时分离到一个引导 chunk 中,
   // 以便可以在之后正确注入异步 chunk。
   optimization: {
     splitChunks: {
       name: "manifest",
       minChunks: Infinity
     }
   },
 
   plugins: [
     // 此插件在输出目录中生成 `vue-ssr-client-manifest.json`。
     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 指向应用程序的 server entry 文件
   entry: './src/entry-server.js',
 
   // 这允许 webpack 以 Node 适用方式处理模块加载
   // 并且还会在编译 Vue 组件时,
   // 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。
   target: 'node',
 
   output: {
     filename: 'server-bundle.js',
     // 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)
     libraryTarget: 'commonjs2'
   },
 
   // 不打包 node_modules 第三方包,而是保留 require 方式直接加载
   externals: [nodeExternals({
     // 白名单中的资源依然正常打包
     allowlist: [/\.css$/]
   })],
 
   plugins: [
     // 这是将服务器的整个输出构建为单个 JSON 文件的插件。
     // 默认文件名为 `vue-ssr-server-bundle.json`
     new VueSSRServerPlugin()
   ]
 })
 

构建命令

image.png

构建配置开发模式 --客户端

image.png

使用webpack-hot-middleware实现热更新

npm i webpack-hot-middleware -D

image.png

image.png

Vue Meta

是一个支持ssr的第三方vuejs插件,通过这个插件可以轻松实现不同页面的head内容管理,具体使用方法看官网