- 使用npm下载
npm i prerender-spa-plugin vue-meta-info --save
- 路由改为history模式
- 配置prerender-spa-plugin
在vue.config.js中添加这么一段
new PrerenderSPAPlugin(
// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname,'dist'),
// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
routes: ['/', '/hykt','/hbsl','/hjlx','/hyx','/zhszpj','/hcp','/course','/xxhpt','/news','/aboutus'],
// 这个很重要，如果没有配置这段，也不会进行预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
})
在main.js中添加
new Vue({
router,
store,
render: h => h(App),
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
============================分割线==========================
这样打包时如果资源路径即publicPath不是根目录，打包会一直转圈
publicPath: process.env.NODE_ENV === "production" ? "/website" : "/",
把vue.config.js中的配置改为这样
new PrerenderSPAPlugin(
// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname,'dist'),
// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
routes: ['/', '/hykt','/hbsl','/hjlx','/hyx','/zhszpj','/hcp','/course','/xxhpt','/news','/aboutus'],
// 这个很重要，如果没有配置这段，也不会进行预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
//renderAfterDocumentEvent: 'render-event'
})
})
main.js中的改为这样
new Vue({
router,
store,
render: h => h(App),
mounted () {
// document.dispatchEvent(new Event('render-event'))
document.dispatchEvent(new Event('custom-render-trigger'))
}
}).$mount('#app')
npm run build
如果打包后会有所选路由都有个文件夹，里面装index.html，那么配置成功
注意：如果不是在打包后不是在根目录中，route中的base也要改成目录名称，否则页面不会加载
- 使用vue-meta-info修改每个页面的meta和title信息
在main.js中引入
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
在需要使用的页面
metaInfo: {
title: '',
meta: [
{
name: 'keywords',
content: ''
},
]
},
npm run build
查看打包后html文件有没有meta和title信息，有的话成功，没有再来一次
查阅资料
https://blog.csdn.net/weixin_30433075/article/details/101882128
https://www.jianshu.com/p/6a4c0b281e7f
