vue-服务端渲染1：webpack.config.server && client.js

note_byte
484 阅读2分钟

服务端渲染，vue进阶必备。找到个学习的好资源，先记录，在吸收。


实现 Vue SSR基本原理

主要通过vue-server-renderer将vue组件输出成HTML，过程：

  1. 客户端 entry-client 主要作用挂载到 DOM 上，服务端 entry-server 除了创建和返回实例，还进行路由匹配与数据预获取
  2. webpack打包客户端为client-bundle，打包服务端为server-bundle
  3. 服务器接收请求，根据 url 来加载相应组件，然后生成 html 发送给客户端
  4. 客户端激活， Vue 在浏览器端接管由服务端发送的静态 HTML，使其变为由 Vue 管理的动态 DOM，为确保混合成功，客户端与服务器端需要共享同一套数据。在服务端，可以在渲染之前获取数据，填充到 stroe 里，这样，在客户端挂载到 DOM 之前，可以直接从 store 里取数据。首屏的动态数据通过 window.INITIAL_STATE 发送到客户端

-------------------------------------------------------------------------------------

参考大咖例子，做学习笔记。

先上结构图。



path1：webpack.config.server.js

const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.base')
const ExtractPlugin = require('extract-text-webpack-plugin')
const VueServerPlugin = require('vue-server-render/server-plugin')//服务端渲染最重要的一个插件
let config

config = merge(baseConfig,{
target:'node',             //定义打包文件的执行环境
entry:path.join(__dirname,'../client/server-entry.js'),  //入口文件位置
devtool:'source-map',
output:{
    libraryTarget: 'commonjs2',        //指定写出的代码的调用方式module.export{}
    filename:'server-entry.js',
    path:path.join(__dirname,'../server-build')
},
externals:Object.keys(require('../package.json').dependencies), //不用打包的文件
module:{
    rules:[
        {
    test: /\.styl/,    use: ExtractPlugin.extract({
      fallback: 'style-loader',
      use: [
      'css-loader',         
      //对比，注意这儿在node端，不用vue-style-loader
      //vue-style-loader会把css，通过javascript引用DOM的方式，插入到html里面
      //会有Dom操作的代码在里面。在node端会报错。换用    
      { 
      loader: 'postcss-loader',
      options: {
        sourceMap: true
      }
    },
    'stylus-loader'
  ]
})
plugins: [
  new ExtractPlugin('style.[contentHash:8].css'),
  new webpack.DefinePlugin({               //定义属性，便于其他地方引用
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
    'process.env.VUE_ENV': '"server"',     //Vue官方建议使用的属性，可能会在服务端渲染的时候用到
  }),
  new VueServerPlugin()                    //********重点**            
  //**有个这个插件，整体是不会有javascript文件的输出，输出为json文件,
  //json文件可以通过vue-server-render这个包,做服务端渲染处理复杂的逻辑
]
})
module.export = config

npm i vue-server-render  -S


path2:webpack.config.client.js

const VueClientPlugin = require('vue-server-render/client-plugin')
//服务端渲染最重要的一个插件,   区别于：vue-server-render/server-plugin
......

 const defaultPlugins = [
    new webpack.DefinePlugin({
        'process.env':{
            NODE_ENV:isDev?'"development:':'"production"'
        }
    }),
    new HTMLPlugin({
        template:path.join(__dirname,'template.html')
    }),
    new VueClientPlugin()    //与server/routers/dev-ssr.js中的条件相关
                             //自动生成一个vue-ssr-client-manifest.json文件
]


avatar
文章
阅读
粉丝