具有i18n的Vue prerender-spa-plugin

时间:2020-08-25 09:15:30

标签: vue.js vuejs2 vue-router vue-i18n vue-cli-4

我需要有关i18n for vue的prerender-spa-plugin的帮助。

我正在将i18n用于en,ka和ru。像这样使用router.js:

     Vue.use(VueRouter)
       const routes = [
          {
            path: '/',
            redirect: `/${i18n.locale}`
          },
          {
            path: '/:lang',
            component: {
              render(c) {
                return c('router-view')
              }
            },
            children: [
              {
                path: '/',
                name: 'Home',
                component: Home
              },
            ]
          }
        ]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      console.log(savedPosition)
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

export default router

和用于i18n的vue配置以进行https:// host / en / about或https:// host / ka / about之类的路由,等等...

prerender-spa-plugin的配置

module.exports = {
  pluginOptions: {
    i18n: {
      locale: 'en',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableInSFC: true
    }
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // The path to generate the file can also be consistent with the webpakc package.
          // This directory can only have one level, if the directory level is higher than one level, there will be no error prompt when it is generated, and it will only stick when it is pre-rendered.
          staticDir: path.join(__dirname, 'dist'),
          // If you have parameters for your own routing file, such as about, you need to write / about/param1.
          routes: ['/', '/about'],
          renderer: new Renderer({
            inject: {
              foo: 'bar'
            },
            headless: false,
            renderAfterDocumentEvent: 'render-event'
          })
        })
      ]
    }
  }
}

当我进行纱线构建时,它将使用index.html和dist / en / index.html中的预存储文件创建dist文件夹 enter image description here

我想预渲染dist / index.html文件而不是dist / en / index.html文件,这样是否可以忽略路由中'/'之后的语言环境?!

0 个答案:

没有答案