粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

简介

极速传送门: 基于vue-cli4.0+Typescript+SSR的小Demo

最终效果: 访问，返回的是html片段，并且从chunk中分离了vue依赖

Vue SSR Demo

使用Vue-cli4.0+Typescript+SSR 的小目Demo 怎么说呢，从vue3开始，之前的build目录旧没有了，想要对webpack配置进行修改的话，只能在根目录下新建 vue.config.js文件，具体修改可参照vue-cli官网之前用的是vue-cli2.+,此次直接升级到vue-cli4.+并且直接上了TS，踩了不少坑，不过好在是熬过来了，分享一下我的项目Demo

已实现：

项目搭建
本地ssr开发环境搭建（koa）
使用Vuex实现数据预取(demo删掉了该部分)
打包chunk分离优化
Jenkins + Docker 持续集成、部署
集成到后端项目（egg.js）

主要命令

$ npm install   # 安装依赖
$ npm run dev   # 本地开发
 ├── 8080  本地非ssr环境
 └── 3000  本地ssr环境
$ npm run build   # window下打包命令
$ npm run build:linux   # linux下打包命令

项目目录

┌── .vscode IDE工作区配置
│   └── settings.json
├── dist # 静态资源（自动生成）
│   └── index.temp.html # ssr模板文件
├── public # 静态目录，打包的时候该目录会原封不动的复制到dist目录下
├── server # koa服务
│   ├── index.js # koa入口
│   └── server.js # 服务逻辑
├── src # 主要源码
│   ├── api # 请求管理
│   │   └── api.config.ts 接口管理
│   │   └── axios.config.ts 拦截器管理
│   ├── assets # 资源
│   │   └── ......
│   ├── plugins # 插件
│   │   └── ......
│   ├── utils # 全局方法等
│   │   └── ......
│   ├── views #  页面/视图
│   │   └── ......
│   ├── App.vue # 入口Vue
│   ├── entry-client.ts # 客户端入口
│   ├── entry-server.ts # 服务端入口
│   ├── main # 公共入口
│   ├── router.index.ts # 路由配置
│   ├── store.index.ts # Vuex配置
│   ├── vue-shim.d.ts # ts模块声明
└── .browserslistrc # 浏览器设置
└── .eslintrc.js # eslintrc设置
└── .gitignore # git忽略
└── babel.config.js # babel配置
└── Jenkinsfile # jenkins配置
└── package-lock.json # 版本锁定
└── package.json # 项目依赖
└── tsconfig.json # ts配置文件
└── vue.config.js # webpack配置文件

webpack配置文件解析

```
关闭css分离
```
extract: false, // 目前还没分离出css,正在努力尝试
```
本地ssr搭建
```
本地搭建ssr环境，webpack-dev-server跑本地服务时，会打一次包并进行热更新，所以思路是再起一个node服务，读取监听打包的chunk文件进行ssr的操作，这里有两个点
- 设置 webpack-dev-serve 允许跨域 headers: { ‘Access-Control-Allow-Origin’: ‘*’ },
- 设置publicPath // 加上端口前缀才能访问到静态资源，生产环境因为是集成到后端项目设置跟路径就OK了 process.env.NODE_ENV !== ‘production’ ? ‘http://localhost:8080’ : ‘/’,
```
分离 chunk 减少打包体积
```
// 可以分离大部分依赖，使打包出来的chunk体积变小 // 客户端生产环境才分离 externals: // 可以分离大部分依赖，使打包出来的chunk体积变小 process.env.NODE_ENV === ‘production’ && !TARGET_NODE ? { vue: ‘Vue’, } : undefined,
```
注入版本信息
```
new webpack.DefinePlugin({ ‘process.env.NODE_ENV’: "${process.env.NODE_ENV || 'development'}", // 注意需要用双引号包住 }),
```
关闭splitChunks
```
chainWebpack: (config) => { config.optimization.splitChunks(undefined); },

ssr 基本搭建

```
公共入口 main.ts
```
// 防止单例污染，需要导出一个工厂函数
export function createApp(): any { const router = createRouter(); const store = createStore(); const app = new Vue({ router, store, render: (h) => h(App), }); return { app, router, store }; }
```
客户端入口 entry-client.ts
```
// 挂载到app上 const { app, router } = createApp(); router.onReady(() => { app.$mount(’#app’); });
```
服务端入口 entry-server.ts
```
// 匹配路由，需要返回一个promise，因为有可能是异步组件，若无匹配，则返回404 import { createApp } from ‘./main’; export default (context: any) => new Promise((resolve, reject) => { const { app, router } = createApp(); router.push(context.url); router.onReady(() => { const matchedComponents = router.getMatchedComponents(); if (!matchedComponents.length) { return reject({ code: 404, }); } resolve(app); }, reject); });

4 路由 router.index.ts

// 注意要模式改为 history，让路由请求能到后端
export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'Home',
        component: () => import(/* webpackChunkName: "Home" */ './views/Home.vue'),
      },
      {
        path: '/about',
        name: 'About',
        component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
      },
    ],
  });
}

5 注意不要在组件的 mounted 钩子之前进行 dom 相关的操作，因为服务端会执行到这些钩子

6 实现本地 ssr

  - 读取web-dev-server打包出来的chunk并实时监听
  - 当chunk变化时，使用'vue-server-renderer'的renderToString，渲染成html字符串

7 本地 ssr 环境下，接口转发问题

  // 虽然可以配置 devServer proxy，但是ssr环境在另一个node端口下，需要对接口进行转发
  - 对接口进行规范，接口类的请求都加上'/api'前缀
  - koa server.js 下，对匹配的接口类请求，使用'http-proxy-middleware'和'koa2-connect'进行接口转发

参考文献

带你五步学会Vue SSR

简介

极速传送门: 基于vue-cli4.0+Typescript+SSR的小Demo

最终效果: 访问，返回的是html片段，并且从chunk中分离了vue依赖

Vue SSR Demo

已实现：

主要命令

项目目录

webpack配置文件 解析

ssr 基本搭建

参考文献

webpack配置文件解析