vue3中使用vue-i18n

1.先在项目中下载vue-i18n

npm install [email protected]

2.1 .为了结构清晰，在src目录下创建一个lang文件夹

2.2 . 在lang文件夹分别下创建两个文件：en.js    /    zh.js代表两种语言

en.js:

export default {
  message: {
      hello: 'hello,world',
      btn:'modify'
  }
}

zh.js:

export default {
  message: {
      hello: '你好，世界',
      btn:'修改'
  }
}

2.3 . 接着在lang文件夹下创建一个index.js文件：

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

const messages = {//所有语言
    zh: zh,
    en: en,
}

const i18n = createI18n({
    locale: 'zh', //默认当前语言
    fallbackLocale: 'en', //替补语言，比如上边locale语言显示不了了就显示这个语言
    messages, //所有语言
    legacy:false, //用于区分是否使用组合式api，v3使用要设为false
})

export default i18n;

现在目录结构是这样：

3. 在main.js中引入并use刚才创建的index.js文件：

import { createApp } from 'vue'

import App from './App.vue'
import i18n from './lang/index.js'

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

4. 到此基本配置已经完成了，接下来使用：

在项目中任意一个.vue文件中：

5.修改语言