前言

上一次做了路由的相關配置，原本計劃今天要做vuex部分，但是想了想，發現vuex單獨的客戶端部分穿插解釋起來很麻煩，所以今天改做服務端部分。

服務端部分做完，再去做vuex的部分，這樣就會很清晰。

vue ssr是分兩個端，一個是客戶端，一個是服務端。

所以要做兩個cli3的配置。

那么下面就直接開始做吧。

修改package.json的命令

//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"  }

修改vue.config.js配置

添加完相關腳本命令之后，我們開始改造cli3配置。

首先要require('vue-server-renderer')

然后再根據VUE_NODE環境變量來決定編譯的走向以及生成不同的環境清單

先做cli3服務端的入口文件

// src/entry/server.jsimport {  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.jsconst 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;          });  }}