背景：当前项目首页和登陆后的平台在一个项目里，路由采用hash模式，现在要做SEO优化，这时候同构SSR(Server Side Rendering)服务端渲染代价显然太大，影响范围比较广，同样更改当前项目路由为history模式采用预渲染(Prerending)代价也不小。最终决定将首页单独出一个项目采用预渲染，然后用nginx代理来实现两个项目之间的跳转。
同构SSR服务端渲染这里就不多赘述了，说一下预渲染：
一、什么情况下用预渲染比较好
官方文档建议：如果你调研服务器端渲染(SSR)只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时(build time)简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。
二、选用插件
官方文档建议：如果你使用 webpack，你可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试 – 事实上，作者是 Vue 核心团队的成员。
结合vue-meta-info这一类动态设置meta信息的插件，可以达到更好的效果。
三、插件的使用
安装
|
1 2 3 4 |
# Yarn $ yarn add prerender-spa-plugin # or NPM $ npm i prerender-spa-plugin |
vue-cli3 webpack配置
在vue.config.js中：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer module.exports = { configureWebpack: { module: {}, plugins: process.env.NODE_ENV === 'production' ? [ new PrerenderSPAPlugin({ staticDir: path.join(__dirname, process.env.VUE_APP_OUTPUT_DIR), // 需要进行预渲染的路由路径 routes: ['/', '/about'], // html文件压缩 minify: { minifyCSS: true, // css压缩 removeComments: true // 移除注释 }, renderer: new Renderer({ // Optional - The name of the property to add to the window object with the contents of `inject`. injectProperty: '__PRERENDER_INJECTED', // Optional - Any values you'd like your app to have access to via `window.injectProperty`. inject: {}, // 在 main.js 中 new Vue({ mounted () {document.dispatchEvent(new Event('render-event'))}})，两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event' }) }) ] : [] } } |
这里只在 process.env.NODE_ENV === ‘production’的时候进行预渲染，输入目录为 process.env.VUE_APP_OUTPUT_DIR，是在.env .env.prod .env.test等全局环境变量中配置的，可以根据不同环境打包，如.env.prod的配置为：
|
1 2 3 4 |
NODE_ENV = production VUE_APP_OUTPUT_DIR = 'dist-prod' VUE_APP_PROJECT_URL = '/platform' |
这里的VUE_APP_PROJECT_URL稍后再做解释。
以上的new PrerenderSPAPlugin({})配置中删除了
|
1 |
headless: false // Display the browser window when rendering. Useful for debugging. |
目的是为了不打开chromium浏览器。
在main.js中配置：
|
1 2 3 4 5 6 7 8 |
new Vue({ router, store, render: h => h(App), mounted () { document.dispatchEvent(new Event('render-event')) // 预渲染 } }).$mount("#app") |
vue-meta-info安装使用：
安装
|
1 2 3 4 |
# Yarn $ yarn add vue-meta-info # or NPM $ npm install vue-meta-info --save |
使用
|
1 2 3 4 |
import Vue from 'vue' import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo) |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<template> ... </template> <script> export default { metaInfo: { title: 'My Example App', // set a title meta: [{ // set meta name: 'keyWords', content: 'My Example App' }] link: [{ // set link rel: 'asstes', href: 'https://assets-cdn.github.com/' }] } } </script> |
如果你的title或者meta是异步加载的，那么你可能需要这样使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<template> ... </template> <script> export default { name: 'async', metaInfo () { return { title: this.pageName } }, data () { return { pageName: 'loading' } }, mounted () { setTimeout(() => { this.pageName = 'async' }, 2000) } } </script> |
三、项目间跳转配置
现在说一下VUE_APP_PROJECT_URL这个变量，这个变量便是两个项目间跳转的关键。在本地开发中，可以通过设置.env中的变量：
|
1 2 3 |
VUE_APP_PROJECT_URL = 'http://localhost:8080' 另一个项目 VUE_APP_PROJECT_URL = 'http://localhost:8081' |
然后通过window.location.href的方式进行两个本地项目之间的跳转：
|
1 2 3 |
export function toUrl (query) { // 动态更改href window.location.href = process.env.VUE_APP_PROJECT_URL + query } |
至于线上怎么进行跳转，可以这么配置.env.prod中的变量：
|
1 2 3 |
VUE_APP_PROJECT_URL = '/' 另一个项目 VUE_APP_PROJECT_URL = '/platform' |
然后在nginx中配置：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
### 默认进入的项目 ### server { listen 30002; server_name xxx.xx.xxx.xxx; proxy_buffer_size 8k; proxy_buffers 8 32k; set $root /var/www/page-for-seo/dist-prod; root $root; index index.html index.htm index.php; error_log /var/nginx/logs/error.log error; access_log /var/nginx/logs/access.log; #access_log off; ### 客户端请求错误处理 ### error_page 403 404 /404.html; location = /404.html { return 404 'Sorry, File not Found!'; } ### 服务端请求错误处理 ### error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } ### 静态资源有效期 ### location ~ .*\.(jpeg|png|jpg|gif)$ { expires 1d; } ### 匹配所有请求 ### location / { try_files $uri $uri/ /index.php?$query_string; } ### 匹配 platform/ 然后进行代理 ### location ^~ /platform/ { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://xxx.xx.xxx.xxx:30012/; } } ### 要进行跳转的项目 ### server { listen 30012; server_name xxx.xx.xxx.xxx; proxy_buffer_size 8k; proxy_buffers 8 32k; set $root /var/www/platform/dist-prod; root $root; index index.html index.htm index.php; error_log /var/nginx/logs/error.log error; access_log /var/nginx/logs/access.log; #access_log off; ### 客户端请求错误处理 ### error_page 403 404 /404.html; location = /404.html { return 404 'Sorry, File not Found!'; } ### 服务端请求错误处理 ### error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } ### 静态资源有效期 ### location ~ .*\.(jpeg|png|jpg|gif)$ { expires 1d; } ### 匹配所有请求 ### location / { try_files $uri $uri/ /index.php?$query_string; } } |
