vue 预渲染 routes: ['/A', '/B/C']配置,一层级'/A'打包有效,二层级的'/B/C'无效?

在原来的vue项目上选择两个path路由文件进行预渲染seo优化

文件:vue.config.js,新增代码:

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
// 预渲染

 config.plugins.push(

 new PrerenderSPAPlugin({

 // 生成文件的路径,也可以与webpakc打包的一致。

 // 下面这句话非常重要!!!

 // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。

 staticDir: path.join(__dirname,'dist'),

 // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。

 routes: ['/home', '/app/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')

路由配置文件:

// 首页

 {

 path: '/home',

 name: 'home',

 component: () => import('@/views/app/home/index.vue'),

 meta: {

 isTabs: true

 }

 },

 // 关于我们

 {

 path: '/app/aboutUs',

 name: 'appAboutUs',

 component: () => import('@/views/app/aboutUs/index.vue'),

 meta: {

 isTabs: true

 }

 },

执行npm run build打包后的dist目录:
发现没被打包出/app/aboutUs目录,为什么?
image.png

阅读 2.4k
2 个回答

现在可以了,被个强制在pc端打开的这段代码污染了
image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题