问题描述：
在使用VueJs开发项目的时候，由于单页面工程（SPA）的特点，最终只会输出一个HTML文件，不利于搜索引擎优化，对于一些依赖搜索推广的项目来说，存在较大痛点。而传统JS+HTML在效率、可维护性、项目性能上又不及框架，所以在这种情况下，我们需要针对框架给出解决方案，兼顾开发效率和SEO
方案一：SSR服务端渲染
vue项目可以使用Nuxt.js，Nuxt.js是使用 Webpack 和 Node.js 进行封装的基于Vue的SSR框架，使用它，你可以不需要自己搭建一套 SSR 程序，而是通过其约定好的文件结构和API就可以实现一个首屏渲染的 Web 应用。
但是对于一个已经成型的项目来说，改造成本较大，所以本文着重介绍第二种方案。
方案二：预渲染（推荐）
原理：利用库 prerender-spa-plugin + vue-meta-info 配置webpack和页面实现预渲染方案，最终build出来多个html文件
特点：较容易实现，改动较小，较为可控
缺点：不支持动态路由的使用，还有就是install和build时间会比较长
注意：必须是history模式
1.下载所需库文件
npm install vue-meta-info --save
npm install prerender-spa-plugin --save
2.main.js
import Vue from 'vue'
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
new Vue({
router,
render: h => h(App),
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
3.配置webpack
- 避坑提示：
配置中的injectProperty属性有神奇的用处，可以帮您解决一些疑惑的问题- 预编译环境下：
window.__PRERENDER_INJECTED === undefined- 线上运行环境：
window.__PRERENDER_INJECTED === inject配置的值
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
module.exports = {
new PrerenderSPAPlugin({
// 必需 - 要预渲染的 webpack 输出应用程序的路径
staticDir: path.join(__dirname, '/dist'),
// 必需 - 要渲染的路由。
routes: [
'/index',
'/home',
'/login',
],
// 预渲染代理接口
// server: {
// proxy: {
// '/api': {
// target: 'http://localhost:9001',
// secure: false
// }
// }
// },
// 渲染器
renderer: new Renderer({
// 可选 - 要添加到包含 `inject` 内容的 window 对象的属性名称。
injectProperty: '__PRERENDER_INJECTED',
// 可选 - 您希望您的应用程序可以通过 `window.injectProperty` 访问的任何值。
inject: {
foo: 'bar'
},
headless: true, // 渲染时显示浏览器窗口。用于调试
renderAfterDocumentEvent: 'render-event' // 对应main.js中的事件名
})
}),
}
4.将需要预渲染的页面配置SEO文字内容（对应上面routes数组里路由指向的页面）
export default {
metaInfo: {
title: '我是 index 页面的title',
meta: [
{
name: 'keywords',
content: '我是 index 页面的keywords'
},
{
name: 'description',
content: '我是 index 页面的description'
}
]
},
}
