Vue（十一）：Vue3语言国际化

展示

搭建Vue3项目

安装国际化依赖插件

​​npm install vue-i18n@next​​

创建language文件夹

• ​​src\language\en.js​​

// src\language\en.js
export default {
    message: {
      Home: 'home',
      About: 'About',
      productService: 'productService',
      cases: 'cases',
      news: 'news',
      contactUs: 'contactUs',
    },
}

• ​​src\language\zh.js​​

export default {
    message: {
      Home: '首页',
      About: '关于我们',
      productService: '产品服务',
      cases: '行业解决方案',
      news: '新闻动态',
      contactUs: '联系我们',
    },
}

• ​​src\language\index.js​​

import en from './en'
import ch from './zh'
 
export default {
  en,
  ch,
}

• ​​src\language\i18n.js​​

import { createI18n } from 'vue-i18n' //引入vue-i18n组件
import messages from './index'
const language = (
  (navigator.language ? navigator.language : navigator.userLanguage) || "zh"
).toLowerCase();
const i18n = createI18n({
  fallbackLocale: 'ch',
  globalInjection:true,
  legacy: false, // you must specify 'legacy: false' option
  locale: language.split("-")[0] || "zh",
  messages,
});
 
export default i18n;

通过指令方式

​​Main.js​​

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './language/i18n'

const app = createApp(App)
  .use(i18n);

app.directive('change-lang', {
  mounted(el) {
    el.addEventListener('click', (e) => {
      let lang = e.target.getAttribute('lang');
      i18n.global.locale.value  = lang;
    })
  }
})

app.mount('#app')

组件内

<button v-change-lang lang="zh">中文</button>
<button v-change-lang lang="en">English</button>

<ul>
   <li v-for="menu in menuItems" :key="menu.label">
      {{ $t(`message.${menu.label}`) }}
   </li>
</ul>

<script setup>const menuItems = [
  { label: "Home" },
  { label: "About" },
  { label: "productService" },
  { label: "cases" },
  { label: "news" },
  { label: "contactUs" },
];</script>

通过组件内引用

​​Main.js​​

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './language/i18n'

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

组件内

<button @click="change('zh')">中文</button>
<button @click="change('en')">English</button>

<ul>
   <li v-for="menu in menuItems" :key="menu.label">
      {{ $t(`message.${menu.label}`) }}
   </li>
</ul>

<script setup>import { getCurrentInstance} from 'vue';
const { proxy } = getCurrentInstance();

function change(type) {
  proxy.$i18n.locale = type;
}</script>