Vue3.0 + Ts 项目框架搭建五：配置 i18n

下载

npm install vue-i18n --save

安装完成之后，可以看一下package.json文件；看是否安装成功，我安装的是9.1.10版本。

在项目src文件夹中新建i18n文件夹

1. 在 i18n文件夹下创建 index.ts，zh.ts，en.ts

// index.ts 文件内容

import { createI18n } from 'vue-i18n'

import ZH from './zh'
import EN from './en'

const message = {
  zh: {
    ...ZH
  },
  en: {
    ...EN
  }
}

const getCurrentLanguage = () => {
  const UAlang = navigator.language // zh-CN
  const langCode = UAlang.indexOf('zh') !== -1 ? 'zh' : 'en'
  localStorage.setItem('lang', langCode)
  return langCode
}

const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: getCurrentLanguage() || 'zh',
  messages: message
})

export default i18n

// zh.ts 文件内容

export default {
  login: {
    title: '用户登录',
    btnTitle: '登录'
  }
}

// en.ts 文件内容

export default {
  login: {
    title: 'user login',
    btnTitle: 'login'
  }
}

2. main.ts 引入挂载

// 配置i18n
import i18n from '@/i18n/index'
const app = createApp(App)
app.use(i18n)

3. 页面使用

<div>{{ $t('login.title') }}</div>

遇到问题：

使用i18n控制台警告信息:
You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.

解决：
在vue.config.js配置中添加如下：

chainWebpack: config => {
    config.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.cjs.js')
}