vue3中使用 vue-i18n 的经历

vue3中使用 vue-i18n 的经历

1.安装 使用版本+ @nuxt

 npm install vue-i18n@next  yarn add vue-i18n@next(个人推荐)
``` `

### 2.创建目录

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3a2fa78a11594e6e92e34b6b86cae765~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=452&h=310&s=26221&e=png&b=252526)

### 配置：

en.js

`const en = {
  message:{
    testTxt:"english"
  }
}
export default en`

index.js:

import en from './en.js'
import zh from './zh.js'

export default {
  en,
  zh
}

i18n.js:

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

console.log(messages,"=--0--")
const i18n = createI18n({
    legacy:false,
    locale: localStorage.getItem('lang') || 'zh',
    messages
})
export default i18n


全局引用
main.js:

import { createApp } from 'vue'
import './style.css'
import i18n from './utils/language/i18n.js'
import App from './App.vue'

const app = createApp(App);

console.log(i18n,"i18n--")
app.use(i18n).mount('#app');


使用：

template页面内：
<li><a @click="scrollToAnchor(section1Ref)">{{ $t('message.testTxt') }}</a></li>


script 内：俩种方法：

import { ref,onMounted, getCurrentInstance } from "vue";

import Main from "./components/Main.vue";
import {useI18n} from 'vue-i18n';
// console.log(useI18n())
const { t,locale } = useI18n();

const { proxy } = getCurrentInstance();
console.log(t('message.testTxt'));
console.log(proxy, proxy.$t('message.testTxt'))