新版Elemen Plus 国际化失效
由于 1.0.2-beta.59(包含59) 之后,重新组织了代码,让国际化功能不能正常的使用。现根据B站up主程序员青戈方案进行解决,亲测有效
一、去掉原有配置
两处注释内容删除
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入element-plus
import ElementPlue from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
//import locale from 'element-plus/lib/locale/lang/zh-cn'
//import 'dayjs/locale/zh-cn'
// 引入 axios
import axios from 'axios';
const app = createApp(App)
// 将自动设置 Day.js 的国际化设置为 'zh-cn'
app.use(ElementPlue,{/*locale*/size: 'small'})
app.config.globalProperties.$axios = axios
app.use(store).use(router).mount('#app')
二、修改App.vue
1.添加标签<el-config-provider :locale="locale"> </el-config-provider>
将需要国际化的内容框起来
<template>
<!-- <div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/login">About</router-link>
</div> -->
<el-config-provider :locale="locale">
<router-view />
</el-config-provider>
</template>
2.导入组件
import {ElConfigProvider} from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
3.添加组件[ElConfigProvider.name]:ElConfigProvider,
<script>
//导入组件
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
export default {
name: "App", //这里根据你自己的修改
components: {
[ElConfigProvider.name]: ElConfigProvider, //添加组件
},
data() {
return {
locale: zhCn, //给locale赋值
};
},
};
</script>
4.赋值
data(){
return{
locale:zhCn
}
}
5.重启项目,就可以实现国际化了
以下内容可以完全替换App.vue的信息
<template>
<el-config-provider :locale="locale">
<!--需要国家化的内容-->
</el-config-provider>
</template>
<style>
</style>
<script>
//导入组件
import {ElConfigProvider} from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
export default {
name: "Layout",//这里根据你自己的修改
components: {
[ElConfigProvider.name]:ElConfigProvider,//添加组件
},
data(){
return{
locale:zhCn,//给locale赋值
}
}
}
</script>