vue3+element-plus国际化

package.json

{
  "name": "vue3-eplus",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.7.2",
    "vue": "^3.4.21",
    "vue-i18n": "^10.0.0-alpha.3",
    "vue-router": "^4.3.0",
    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
    "vite": "^5.2.8"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

main.js

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import i18n from "@/i18n/index";
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import store from './store'

const app = createApp(App)
app.use(ElementPlus)
app.use(i18n)
app.use(store)

app.use(router)

app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

app.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

store.js

import { createStore } from "vuex";
export default createStore({
    state: {
        lan: 'zh'
    },
    mutations: {
        setLanguage(state, val) {
            state.lan = val
        }
    },
    getters: {
        getLanguage(state) {
            return state.lan
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

i18n/index.js

import { createI18n } from "vue-i18n";
//这是我自己创建的语言包
import mZhLocale from "./lang/zh";
import mEnLocale from "./lang/en";
//这里使用了vuex来进行全局的数据共享
import { useStore } from "vuex";
const store = useStore();
//创建messages对象，里面注册相应的语言包，这里面我注册了自己定义的语言包
const messages = {
  en: {
    ...mEnLocale,
  },
  zh: {
    ...mZhLocale,
  },
};

const i18n = createI18n({
  legacy: false, // 使用composition API
  locale: store?.state.lan || 'zh'
  globalInjection: true,  // 表明使用全局t函数
  messages,
});
export default i18n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24