使用Vue.js搭建可扩展多语言站点的方案、插件及路由配置咨询

核心依赖选择 #

使用vue-i18n作为多语言处理插件，是Vue官方维护的标准多语言解决方案，可实现单套视图适配所有语言，无需为不同语言创建重复组件。

路由优化方案 #

废弃按语言单独配置路由的模式，改为动态语言前缀参数的路由规则，所有语言复用同一业务组件：

// 路由index.js 优化后配置
const routes = [
  {
    path: '/:lang/display-page',
    name: 'Display',
    component: Display, // 仅需维护1份通用Display组件
    meta: {
      requiresAuth: true
    }
  }
]

// 新增全局路由守卫，自动同步语言配置
router.beforeEach((to, from, next) => {
  const supportLangs = ['en', 'zh', 'ja'] // 可按需扩展支持的语言列表
  const currentLang = to.params.lang
  if (supportLangs.includes(currentLang)) {
    // 同步切换i18n当前生效语言
    i18n.global.locale.value = currentLang
    next()
  } else {
    // 未匹配到支持语言时跳转默认英文页面
    next('/en/display-page')
  }
})

vue-i18n 配置示例 #

// 新建i18n/index.js配置文件
import { createI18n } from 'vue-i18n'

// 统一管理所有多语言文案，新增语言仅需在此处添加对应配置项
const messages = {
  en: {
    menu: {
      englishEntry: 'English',
      switchLangPage: 'Switch Language Page'
    }
  },
  zh: {
    menu: {
      englishEntry: '英文',
      switchLangPage: '切换语言页面'
    }
  }
}

const i18n = createI18n({
  legacy: false, // Vue3 组合式API场景需关闭legacy模式
  locale: 'en', // 站点默认语言
  messages
})

export default i18n
// 完成配置后在main.js中通过app.use(i18n)注册即可全局使用

Menu.vue 代码优化 #

<v-list-item>
   <v-list-item-title>{{ $t('menu.englishEntry') }}</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>
 <router-link :to="`/${$i18n.locale === 'en' ? 'zh' : 'en'}/display-page`">
   {{ $t('menu.switchLangPage') }}
 </router-link>
</v-list-item-title>

日常使用规则 #

所有业务组件中的文案不要写死静态内容，统一使用$t('配置项key')的方式渲染，切换路由中的lang参数时会自动加载对应语言的文案，无需修改组件逻辑。后续新增语言仅需在messages配置中新增对应语言的文案包即可，扩展成本极低。

内容的提问来源于stack exchange，提问作者Bismark Asiedu Asante