vue-cli3.0搭建的項(xiàng)目文件簡(jiǎn)潔很多娄涩，很舒服，沒(méi)有build和config文件夾，所以應(yīng)該在根目錄下創(chuàng)建vue.config.js文件進(jìn)行webpack配置褐望。
1.核心插件
cnpm install prerender-spa-plugin --save-dev
2.vue-config.js中
const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 為生產(chǎn)環(huán)境修改配置...
return {
plugins: [
// 預(yù)渲染配置
new PrerenderSPAPlugin({
//要求-給的WebPack-輸出應(yīng)用程序的路徑預(yù)渲染裸影。
staticDir: path.join(__dirname, 'dist'),
//必需挣轨，要渲染的路線。
routes: ['/','/fillIn'],
//必須轩猩，要使用的實(shí)際渲染器卷扮，沒(méi)有則不能預(yù)編譯
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false, //渲染時(shí)顯示瀏覽器窗口。對(duì)調(diào)試很有用均践。
//等待渲染晤锹，直到檢測(cè)到指定元素。
//例如彤委，在項(xiàng)目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))`
renderAfterDocumentEvent: 'render-event'
})
})
],
}
} else {
// 為開(kāi)發(fā)環(huán)境修改配置...
return;
}
}
}
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.npm run build打包鞭铆，生成的 dist 目錄里有配置的每個(gè)路由名稱對(duì)應(yīng)的文件夾，里面的index.html有內(nèi)容焦影，就代表成功了车遂。反之，請(qǐng)重新按步驟檢查斯辰。
原文作者：匆匆那年_海艰额，博客主頁(yè)：http://www.reibang.com/u/910c0667c515
95后前端漢子，愛(ài)編程椒涯、優(yōu)秀柄沮、聰明、理性、沉穩(wěn)祖搓、智慧的程序猿一枚狱意。
