Express+Vue+AMP+PWA项目模板使用说明

介绍

特点

解决单页面应用(SPA)的SEO配置问题
拥有可控的服务端中间件功能，服务端重定向，服务端打cookie等
可在服务端根据前端需要组装数据供首屏渲染使用
可方便开发AMP页面，并跟vue打包资源同时发布又区分明确的静态资源
一键集成PWA功能，附带可用的pwa配置
方便vue多页面入口配置，及打包资源分析等等
包含技术点
vue-cli3、Express、AMP、PWA、Node.js、Redis

项目运行效果

模板项目使用介绍

项目环境配置

下载代码后进入项目目录安装依赖

1	npm install

vue环境配置

vue环境变量配置，在项目跟目录根据自己需求新增 .env.local文件，参照.env配置自己想要自定义的环境变量。具体vue-cli 环境变量介绍请看官方文档

新建page入口，在src/pages目录下面新建文件夹，在新增文件夹下面新增 App.vue,index.html,router.js等其他文件即可，vue.config.js里面的pages配置会自动识别新增page目录。
具体配置代码如下,vue.config.js详细配置参考官方文档

const pages = {}
glob.sync('./src/pages/**/index.js').forEach(path => {
  const chunk = path.split('./src/pages/')[1].split('/index.js')[0]
  pages[chunk] = {
    entry: path,
    template: './src/pages/' + chunk + '/index.html',
    filename: chunk + '/index.html',
    chunks: ['chunk-vendors', 'chunk-common', chunk]
  }
})

运行项目执行如下命令

1	npm run serve

或者

1	npm run dev

Node服务端环境配置

服务端环境变量配置，在server目录下面新建.env把server/.env.example文件里面的环境变量复制到.env文件，然后根据自己环境需要更改环境变量的值。

本地https证书安全环境配置，更改.env的SERVER_PROTOCOL的值为https, （本地生成免费安全证书可以用mkcert, mkcert是用golang编写的证书生成工具）
需要把生成的证书文件.pem文件放入到server/cert目录。
配置.env的PRIVATE_KEY_NAME和CERTIFICATE_NAME环境变量值为server/cert目录下的文件名。

服务端代码Debugger, 我们知道前端代码可以方便的再浏览器的开发者面板中进行断电调试，但是服务端的代码调试不能，因为服务端的代码不在浏览器执行。那么我这里推荐大家使用VSCode来配置Debugger

用VSCode打开项目，操作如上图步骤。会在.vscode目录生成launch.json配置文件，在配置文件配置如下配置

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动Node服务",
      "runtimeExecutable": "nodemon",
      "cwd": "${workspaceFolder}/server",
      "program": "${workspaceFolder}/server/app.js",
      "restart": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

配置完就可以按照下图步骤操作，就能启动服务并可以在服务端任意代码行号左侧点击打断点调试。

项目主要的脚本命令

脚本	命令	注意事项
运行开发环境	npm run dev	只是启动vue的开发环境
启动服务端环境	npm run start	启动node服务端环境
打包测试环境	npm run build:test	打包
打包预发布环境	npm run build:alpha	打包
打包生产环境	npm run build:prod	打包

Express配合Vue&AMP的注意事项

AMP的路由 ampRoute.js 使用的ampMiddleware设置了view engine 为ejs的渲染模板

1 2	req.app.set('views', './amp/views') req.app.set('view engine', 'ejs')

而Vue的路由配置的是自定义渲染模板，根据在Vue打包模板里面配置的模板占位变量来从Node服务端注入相关自定义数据。

req.app.engine('html', function (filePath, options, callback) {
    fs.readFile(filePath, function (err, content) {
      if (err) return callback(err)
      var rendered = content
        .toString()
        .replace('##meta##', options.meta)
        .replace('##ampLink##', options.ampLink || '')
        .replace('"##apiJonsContent##"', options.apiJonsContent)
      return callback(null, rendered)
    })
  })
  req.app.set('views', './public')
  req.app.set('view engine', 'html')

注意配置 .env的 redis server （需要安装Redis并启动Redis）

1
2
3

REDIS_HOST=127.0.0.1
REDIS_PORT=6379
REDIS_PREFIX=website_mobile_alpha

为了提升性能及减少服务器资源开销，在node服务端请求到数据后，最后根据参数及数据类型利用Redis缓存。正常情况请求一个API需要1000mm左右, 从Redis取数据低于10mm。