由于篇幅限制， koa 及 lib 目录下的文件参考示例代码。其中 lib 下的文件均来自 vue-cli ，主要用于判断用户是否使用 yarn 以及在浏览器中打开URL。 这时，为了适应上述功能的需要，需添加以下模块（可选）：
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 （编译后）命令，访问 :3000 。
通过查看源文件可以看到，首屏渲染结果是这样的：
~ curl -s :3000/ | grep Hello <div data-server-rendered="true"><div>Hello World SSR</div></div>
至此，Vue SSR配置完成。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: