vueCli5版本vue3项目使用i18n国际化语言

vueCli5版本vue3项目使用i18n国际化语言

• 环境

"vue": "^3.2.13",
"vue-i18n": "^9.2.2",

• 安装

npn install vue-i18n

• 配置

0. 在main.js中配置

import i18n from './i18n/index';

const app = createApp(App)
app.use(i18n)
app.mount('#app')

1. 在src文件下创建i18n文件夹

2. 在i18n文件内分别创建 index.js zh.js en.js 三个文件夹

// index.js
import { createI18n } from 'vue-i18n';
import en from './en'    // 英文
import zh from './zh'    // 中文

const messages = {
  zh: { ...zh },
  en: { ...en },
};
const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: 'zh', // 默认 zh 为中文
  messages
});

export default i18n;

// zh.js
export default {
  msg: {
    title: '标题'
  }
};

// en.js
export default {
  msg: {
    title: 'title'
  }
};

3. 在vue.config.js配置文件中新增如下配置消除警告

module.exports = defineConfig({
  configureWebpack: {
    resolve: {
      alias: { 'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js' },
    },
  },
})

• 使用

<template>
  <div>
    <button @click="changeZh">切换中文</button>
    <button @click="changeEn">切换英文</button>
    <hr>
    <span> {{ $t("msg.title") }} </span>
  </div>
</template>

 
<script setup>
import { getCurrentInstance } from "vue";
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()

// 切换中文
function changeZh() { locale.value = 'zh' }
// 切换英文
function changeEn() { locale.value = 'en' }


const { $t } = getCurrentInstance().proxy;
// console.log($t("person.name")); // => 获取值
</script>
<style scoped lang='less'></style>

• 参考博客

地址