前言：使用vue-cli打包項(xiàng)目一般為spa項(xiàng)目陷揪，眾所周知單頁面應(yīng)用不利于SEO泪姨，有ssr和預(yù)渲染兩種解決方案碰逸，這里我們只討論預(yù)渲染肠槽。此教程使用的prerender-spa-plugin版本和vue版本
"prerender-spa-plugin": "^3.4.0",
"vue": "^2.5.17",
vue-cli有2.0和3.0版本擎淤，解決方法是不一樣的，這里我們要分開討論秸仙。
vue-cli3.0版本
3.0的cli看上去簡潔多了嘴拢，去掉了2.0 build和config等目錄，那我們怎么去修改webpack的配置呢寂纪？
在根目錄下創(chuàng)建vue.config.js席吴，進(jìn)行你的配置赌结。
1.安裝
cnpm install prerender-spa-plugin --save
2.vue-config.js中增加
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new PrerenderSPAPlugin({
// 生成文件的路徑，也可以與webpakc打包的一致孝冒。
// 下面這句話非常重要＜硪Α！庄涡！
// 這個(gè)目錄只能有一級量承，如果目錄層次大于一級，在生成的時(shí)候不會(huì)有任何錯(cuò)誤提示穴店，在預(yù)渲染的時(shí)候只會(huì)卡著不動(dòng)撕捍。
staticDir: path.join(__dirname,'dist'),
// 對應(yīng)自己的路由文件，比如a有參數(shù)泣洞，就需要寫成 /a/param1卦洽。
routes: ['/', '/product','/about'],
// 這個(gè)很重要，如果沒有配置這段斜棚，也不會(huì)進(jìn)行預(yù)編譯
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))阀蒂，兩者的事件名稱要對應(yīng)上。
renderAfterDocumentEvent: 'render-event'
})
}),
],
};
}
}
3.在main.js中增加
new Vue({
router,
store,
render: h => h(App),
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
4.router.js 中設(shè)置mode: “history”
5.運(yùn)行npm run build弟蚀，看一下生成的 dist 的目錄里是不是有每個(gè)路由名稱對應(yīng)的文件夾蚤霞。然后找個(gè) 目錄里 的 index.html 用IDE打開，看文件內(nèi)容里是否有該文件應(yīng)該有的內(nèi)容义钉。有的話昧绣，就設(shè)置成功了，如果沒成功捶闸，照著上面的步驟再來一次Ｒ钩搿！删壮！
vue-cli2.0版本
1.安裝
cnpm install prerender-spa-plugin --save
2.webpack.prod.conf.js增加部分代碼
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin') //引用插件
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const webpackConfig = merge(baseWebpackConfig, {
plugins: [
// vue-cli生成的配置中就已有這個(gè)了贪绘，不要?jiǎng)? new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
// 配置PrerenderSPAPlugin
new PrerenderSPAPlugin({
// 生成文件的路徑，也可以與webpakc打包的一致央碟。
staticDir: path.join(__dirname, '../dist'),
// 對應(yīng)自己的路由文件税灌，比如index有參數(shù)，就需要寫成 /index/param1亿虽。
routes: ['/', '/product','/about','/contact','/join','/jzjh'],
// 這個(gè)很重要菱涤，如果沒有配置這段，也不會(huì)進(jìn)行預(yù)編譯
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))洛勉，兩者的事件名稱要對應(yīng)上粘秆。
renderAfterDocumentEvent: 'render-event'
})
})
]
})
3.在main.js中增加
new Vue({
el: '#app',
router,
render: h => h(App),
mounted () {
document.dispatchEvent(new Event('render-event'))
}
})
4.router.js 中設(shè)置mode: “history”
5.運(yùn)行npm run build，看一下生成的 dist 的目錄里是不是有每個(gè)路由名稱對應(yīng)的文件夾收毫。然后找個(gè) 目錄里 的 index.html 用IDE打開攻走，看文件內(nèi)容里是否有該文件應(yīng)該有的內(nèi)容氓涣。有的話，就設(shè)置成功了陋气，如果沒成功，照著上面的步驟再來一次Ｒ蟆９谩！
特別提醒
1.vue-cli2.0和3.0的設(shè)置大致一致淳附，但有一個(gè)很不同
在3.0中议慰，設(shè)置staticDir: path.join(__dirname,'dist'),
在2.0中，設(shè)置staticDir: path.join(__dirname,'../dist'),
如果你把3.0的staticDir設(shè)置為path.join(__dirname,'../dist')或者把2.0的staticDir設(shè)置為path.join(__dirname,'dist')奴曙，運(yùn)行npm run build 都會(huì)報(bào)錯(cuò)别凹，這要特別注意！Ｇ⒃恪炉菲！
2.細(xì)心的小伙伴會(huì)發(fā)現(xiàn)，不管2.0還是3.0都需要設(shè)置 history 模式坤溃，那這一步是否是必須的呢拍霜？經(jīng)過測試，如果不設(shè)置history模式薪介，其實(shí)也能運(yùn)行和生成文件的祠饺，但查看每個(gè)index.html文件的內(nèi)容都會(huì)是一樣的。所以這一步是必須的
