vue-html-loader" | sed 's/#[[:space:]].*//g' | tr 'n' ' ' | sed 's/[ ][ ]*/ /g' | bash
现在的npm模块命名越来越语义化，基本上都是见名知意。关于Eslint以及Stylus、Less等CSS预处理模块我没有添加，其不是本文研究的重点，况且既然您在阅读本文，这些配置相信早已不在话下了。
效仿 electorn 分离main及renderer，在 src 中创建 api 及 web 目录。效仿 vue-cli ，在根目录下创建 public 目录用于存放根目录下的静态资源文件。
|-- public # 静态资源
|-- src
|-- api # 后端代码
|-- web # 前端代码譬如 NUXT.js ，前端服务器代理API进行后端渲染，我们的配置可以选择进行一层代理，也可以配置减少这层代理，直接返回渲染结果。通常来说，SSR的服务器端渲染只渲染首屏，因此API服务器最好和前端服务器在同一个内网。
配置 package.json 的 scripts ：
"scripts": {
"serve": "cross-env NODE_ENV=development node config/server.js",
"start": "cross-env NODE_ENV=production node config/server.js"
} yarn serve : 启动开发调试
yarn start : 运行编译后的程序
config/app.js 导出一些常见配置：
module.exports = {
app: {
port: 3000, // 监听的端口
devHost: 'localhost', // 开发环境下打开的地址，监听了0.0.0.0，但是不是所有设备都支持访问这个地址，用127.0.0.1或localhost代替
open: true // 是否打开浏览器
}
}配置SSR
我们以Koa作为调试和实际运行的服务器框架， config/server.js :
const path = require('path')
const Koa = req uire('koa')
const koaCompress = require('koa-compress')
const compressible = require('compressible')
const koaStatic = require('./koa/static')
const SSR = require('./ssr')
const conf = require('./app')const isProd = process.env.NODE_ENV === 'production'
const app = new Koa()
app.use(koaCompress({ // 压缩数据
filter: type => !(/event-stream/i.test(type)) && compressible(type) // eslint-disable-line
}))
app.use(koaStatic(isProd ? path.resolve(__dirname, '../dist/web') : path.resolve(__dirname, '../public'), {
maxAge: 30 * 24 * 60 * 60 * 1000
})) // 配置静态资源目录及过期时间
// vue ssr处理，在SSR中处理API
SSR(app).then(server => {
server.listen(conf.app.port, '0.0.0.0', () => {
console.log(`> server is staring...`)
})
})
上述文件我们根据是否是开发环境，配置了对应的静态资源目录。需要说明的是，我们约定编译后的API文件位于 dist/api ，前端文件位于 dist/web 。
