从0到1构建vueSSR项目之node以及vue-cli3的配置

前言

上一次做了路由的相关配置，原本计划今天要做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;          });  }}