vue3+vite项目引入国际化i18n

安装i18n

js 复制代码

npm install vue-i18n

此处说下废话：处于好奇去查了国际化为什么叫i18n，原来是因为国际化的英文单词internationalization太长了，掐头去尾取首字母i和尾字母n，中间刚好还有18个字母，就缩写为了i18n。

配置

在src文件夹下新添加文件夹，名为：locales。在此文件夹下添加三个文件，en.js、zh.js、index.js，目录结构如下：

三个文件的具体内容如下：

js 复制代码

// index.js
import { createI18n } from 'vue-i18n'
import zh from './zh.js'
import en from './en.js'

const i18n = createI18n({
  locale: localStorage.getItem('lang') || 'zh',
  fallbackLocale: 'zh',
  legacy: false,
  messages: {
    zh,
    en
  }
})

export default i18n

js 复制代码

// zh.js
export default {
  // 公用
  common: {
    edit: 编辑
  },
  // 日期相关
  dayNames: {
    day: '日',
    week: '周',
    month: '月',
    season: '季',
    year: '年',
  },
}

js 复制代码

export default {
// 公用
  common: {
    edit: edit
  },
  // 日期相关
  dayNames: {
    day: 'day',
    week: 'week',
    month: 'month',
    season: 'season',
    year: 'year',
  },
}

引入

在项目的main.js中进行引入：

js 复制代码

// main.js
// 引入国际化(此处只展示国际化相关代码)
import i18n from './locales/index.js';
const app = createApp(App).use(i18n);

使用

设置中英切换

js 复制代码

// inedx.vue
<!-- 切换中英文 使用select即可 -->
<el-select v-model="currentLanguage" @change="changeLanguage" class="m-2" placeholder="Select" size="small">
    <el-option
      v-for="item in languagesOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
 </el-select>
 
 <script setup>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()

const languagesOptions = [
    {
        label: '中文',
        value: 'zh',
    },
    {
        label: 'English',
        value: 'en',
    },
]
const currentLanguage = computed(() => {
    return locale.value || localStorage.getItem('lang') || 'zh'
})
const changeLanguage = (val) => {
    locale.value = val
    // 切换语言后，存储到localStorage中
    // 避免跳转页面或者刷新当前页后，语言又变成默认的中文
    localStorage.setItem('lang', val)
}
 </script>

此代码片段对应的页面内容：

在模板中使用,即在template标签中使用

使用$t语法，示例如下：

js 复制代码

<div class="test">{{ $t('common.edit') }}</div>

// 作为绑定的动态值使用时，去掉大花括号
<el-date-picker
  v-model="test"
  type="daterange"
  range-separator="~"
  :start-placeholder="$t(`dayNames.days`)"
/>

此处注意'common.edit'的引号不能省略

在js中使用，即在script中使用

需要引入文件，使用t语法

js 复制代码

import { useI18n } from 'vue-i18n' 
const { t } = useI18n()

const timeFiveList = computed(() => {
  return [
    {value: 'day', label: t(`dayNames.day`)},
    {value: 'week', label: t(`dayNames.week`)},
    {value: 'month', label: t(`dayNames.month`)},
    {value: 'season', label: t(`dayNames.season`)},
    {value: 'year', label: t(`dayNames.year`)},
  ]
})

如果遇到切换中英文后，对应文字并没有成功切换的，考虑使用computed去监听。