Vue项目SEO优化的另一种姿态
原文：https://www.cnblogs.com/Man-Dream-Necessary/p/10141717.html
背景：当前项目首页和登陆后的平台在一个项目里，路由采用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信息的插件，可以达到更好的效果。
三、插件的使用
安装
# Yarn $ yarn add prerender-spa-plugin # or NPM $ npm i prerender-spa-plugin
vue-cli3 webpack配置
在vue.config.js中：
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的配置为：
NODE_ENV = production VUE_APP_OUTPUT_DIR = 'dist-prod' VUE_APP_PROJECT_URL = '/platform'
这里的VUE_APP_PROJECT_URL稍后再做解释。
以上的new PrerenderSPAPlugin({})配置中删除了
headless: false // Display the browser window when rendering. Useful for debugging.
目的是为了不打开chromium浏览器。
在main.js中配置：
new Vue({
router,
store,
render: h => h(App),
mounted () {
document.dispatchEvent(new Event('render-event')) // 预渲染
}
}).$mount("#app")
vue-meta-info安装使用：
安装
# Yarn $ yarn add vue-meta-info # or NPM $ npm install vue-meta-info --save
使用
import Vue from 'vue'
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
<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是异步加载的，那么你可能需要这样使用
<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中的变量：
VUE_APP_PROJECT_URL = 'http://localhost:8080' 另一个项目 VUE_APP_PROJECT_URL = 'http://localhost:8081'
然后通过window.location.href的方式进行两个本地项目之间的跳转：
export function toUrl (query) { // 动态更改href
window.location.href = process.env.VUE_APP_PROJECT_URL + query
}
至于线上怎么进行跳转，可以这么配置.env.prod中的变量：
VUE_APP_PROJECT_URL = '/' 另一个项目 VUE_APP_PROJECT_URL = '/platform'
然后在nginx中配置：
### 默认进入的项目 ###
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;
}
}
浙公网安备 33010602011771号