Solution blog link: www.jianshu.com/p/9059539d4…
main.js
This is a bug that Element-Plus is working on officially
1, the first line structure ref
2. Lines 9 to 35 need to inject internationalization code by themselves.
Call on line 38.
import { createApp,ref } from 'vue' import ElementPlus from 'element-plus'; import router from './router' import 'element-plus/lib/theme-chalk/index.css'; import App from './App.vue' import storage from './utils/storage'; import zhLocale from 'element-plus/lib/locale/lang/zh-cn' ElementPlus.useLang = (app, ref, locale) => { const template = (str, option) => { if (! str || ! option) return str return str.replace(/{(\w+)}/g, (_, Key) => {return option[key]})} // Inject global properties, sub-components can obtain app.provide('ElLocaleInjection', {lang: ref(locale.name), locale: ref(locale), t: (... args) => { const [path, option] = args let value const array = path.split('.') let current = locale for (let i = 0, j = array.length; i < j; i++) { const property = array[i] value = current[property] if (i === j - 1) return template(value, option) if (! value) return '' current = value } }, }) } const app = createApp(App) ElementPlus.useLang(app, ref, ZhLocale) / / global register app. Config. GlobalProperties. $storage = storage console. The log (" environment variable = > ", the import meta. Env); app.use(ElementPlus).use(router).mount('#app')Copy the code