详解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南

yarn add memory-fs chokidar readline
yarn add -D opn execa

通过阅读 config/setup-dev-server.js 文件内容，您将发现此处进行了三个webpack配置的处理。

Server for API // 用于处理`/api`开头下的API接口，提供非首屏API接入的能力
Web server for SSR // 用于服务器端对API的代理请求，实现SSR
WEB // 进行常规静态资源的处理

Webpack 配置

|-- config
 |-- webpack.api.config.js // Server for API
 |-- webpack.base.config.js // 基础Webpack配置
 |-- webpack.server.config.js // Web server for SSR
 |-- webpack.web.config.js // 常规静态资源

由于Webpack的配置较常规Vue项目以及Node.js项目并没有太大区别，不再一一赘述，具体配置请翻阅源码。

值得注意的是，我们为API和WEB指定了别名：

alias: {
 '@': path.join(__dirname, '../src/web'),
 '~': path.join(__dirname, '../src/api'),
 'vue$': 'vue/dist/vue.esm.js'
},

此外， webpack.base.config.js 中设定编译时拷贝 public 目录下的文件到 dist/web 目录时并不包含 index.html 文件。

编译脚本：

"scripts": {
 ...
 "build": "rimraf dist && npm run build:web && npm run build:server && npm run build:api",
 "build:web": "cross-env NODE_ENV=production webpack --config config/webpack.web.config.js --progress --hide-modules",
 "build:server": "cross-env NODE_ENV=production webpack --config config/webpack.server.config.js --progress --hide-modules",
 "build:api": "cross-env NODE_ENV=production webpack --config config/webpack.api.config.js --progress --hide-modules"
},

执行 yarn build 进行编译。编译后的文件存于 /dist 目录下。正式环境请尽量分离API及SSR Server。

测试

执行 yarn serve （开发）或 yarn start （编译后）命令，访问 http://localhost:3000 。

通过查看源文件可以看到，首屏渲染结果是这样的：

 ~ curl -s http://localhost:3000/ | grep Hello
 <div id="app" data-server-rendered="true"><div>Hello World SSR</div></div>

至此，Vue SSR配置完成。希望对大家的学习有所帮助，也希望大家多多支持软件开发网。