vue prerender-spa-plugin预渲染

[5Mi]

vue-router history

启用 HTML5history模式利用 history.pushState() 和 history.replaceState() 来管理浏览历史记录。

注意： 当使用 HTML5 history 模式时，服务器需要被正确配置 以防用户在直接访问链接时会遇到404页面。(把服务端路由设置为/和/**都匹配到index页面,前端去拦截 显示404等)

使用此模式url路径中不会有#或#! 服务端不做配置会导致后台路由not fond 所以后台路由应配置 当匹配到相应前端路由时 返回 含有此前端路由<router-view></router-view>的页面 渲染出此页面后,前端路由会展示相应视图

组件中 this.$router 是router对象 (vue-router实例) (有push,go等方法)

this.$route 是 路由信息对象的属性(有path, params等属性)

nginx 配置

location / {
  try_files $uri $uri/ /index.html;
}

值得一提的是:

• root的处理结果是：root路径+location路径
• alias的处理结果是：使用alias路径替换location路径

server {
    listen              9001;
    server_name         localhost;
    location /hello {
        root            /usr/local/var/www/;
    }
}

在请求http://localhost:9001/hello/时，服务器返回的路径地址应该是/usr/local/var/www/hello

在使用alias 别名时

server {
    listen              9001;
    server_name         localhost;
    location /hello {
        alias           /usr/local/var/www/;
    }
}

在请求http://localhost:9001/hello/时，服务器返回的路径地址应该是/usr/local/var/www/（用alias后面的路径将请求的location的地址hello替换掉）

另外，要注意的是，alias路径后面必须使用/结束，否则无法匹配正确的路径，而root后则可有可无。所以建议都加上/，反之出错

try_files

location / {
    try_files $uri $uri/ /index.html;
}

try_files的作用就是在匹配location的路径时，如果没有匹配到对应的路径的话，提供一个回退的方案，在上面的例子中：$uri就代表匹配到的路径。例如我们访问/demo时，$uri就是demo

try_files的最后一个参数是回退方案，前两个参数的意思是，保证如果能够匹配到路径的话访问匹配到的路径，例如访问/demo时，如果根路径下没有demo目录，就会访问index.html 要注意的是 最后一个参数 是来 重新匹配 location 的

server {
    listen              9001;
    server_name         localhost;
    location /test {
        root            /usr/local/var/www/hello/;
        index           index.html;
        try_files       $uri $uri/ /test/index.html;
    }
}

如上配置, 在请求http://localhost:9001/test/demo时, 会到服务器 http://localhost:9001/usr/local/var/www/hello/test/demo查找, 查找不到时 location 规则 匹配 /test/index.html 服务器会到 http://localhost:9001/usr/local/var/www/hello/test/index.html 查找

如上配置如果是alias的话,在请求http://localhost:9001/test/demo时,会到服务器 http://localhost:9001/usr/local/var/www/hello/demo查找, 查找不到时 location 规则 匹配 /test/index.html 服务器会到http://localhost:9001/usr/local/var/www/hello/index.html 查找

[5Mi]

prerender-spa-plugin 注意:

1. 首先vue-router 需要history模式
2. 安装prerender-spa-plugin会依赖无头浏览器库puppeteer,puppeteer需要下个Chromium浏览器,这个翻墙都不一定能下下来,尝试使用cnpm 或 env PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org npm i puppeteer换PUPPETEER_DOWNLOAD_HOST的源

// webpack.prod.conf.js
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
...
//  plugins中
new PrerenderSPAPlugin({
      // 注意路径别写错了,不然页面白屏not found
      staticDir: path.resolve(__dirname, '../dist'),
      indexPath: path.resolve(__dirname, '../dist/index.html'),
      routes: ['/someroute'],
      server: {
        // 代理, process.env.NODE_ENV == 'production'时的请求地址
        proxy: {
          '/api': {
            target: 'http://xxx.xxx.xxx/'
            // pathRewrite: {
            //   '^/api': '/'
            // }
          }
        }
      },
      renderer: new Renderer({
        // inject: {
        //   foo: 'bar'
        // },
        headless: false,
        // 等待5秒预先获取数据,或使用renderAfterDocumentEvent设定触发事件名
        renderAfterTime: 5000,
        // renderAfterDocumentEvent: 'render-event'
      })
    })

...
入口js 如main.js中
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
  // 如果设定了renderAfterDocumentEvent: 'render-event'
  // mounted () {
  //   document.dispatchEvent(new Event('render-event'))
  // }
})

4 形如 关于我们,介绍之类的静态页面可能用着不错,其他场景不是很适合使用,预渲染路由多了build会很慢