解决方案如下:
1.首先需要安装prerender-spa-plugin和vue-meta-info,prerender-spa-plugin解决打包多个页面,vue-meta-info解决SEO的问题
npm install --save prerender-spa-plugin
npm install --save vue-meta-info
2.在项目中找到webpack.prod.conf.js,有可能这个文件名不同,这个时候你需要根据你的命令行来找到相关文件
在此文件中添加如下代码('/cart','list'这是route的路径)
贴上相关代码
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
new PrerenderSPAPlugin({
// Required - The path to the webpack-outputted app to prerender.
staticDir: path.join(__dirname, '../dist'),
// Required - Routes to render.
routes: [ '/', '/cart', '/list'],
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
}),
3.在VUE项目中添加相关代码
4.到这里就完成打包成多个页面,执行打包命令
npm run build
5.打包完成会出现相关文件夹,每个文件都有相关的index,html说明打包成功
5接下去就是解决SEO的问题,main.js中导入vue-meta-info,然后使用
6然后在需要的组件中添加如下代码
7.再执行打包程序,这时候你再相关html页面中查找相关meta