写这篇文章的起因是用el-table的filter多选框下面的中文无法修改为英文。截图解释
el-table的属性里没有一个地方可以修改这里的“筛选”“重置”为英文
因此我找到了github下的这个issue #5705
image.png
顺腾摸瓜找到了https://element.eleme.cn/#/zh-CN/component/i18n#tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian， 早前看过，只是没用上，又忘记有这个功能。
我用的是vue-cli3 +typescript, 注意下@vue/cli-service 已经内置了webpack 服务， 所以如果你也是用vue-cli ，那么网络上说要修改webpack.config.js的地方现在要变成修改vue.config.js， 因为用webpack.config.js是单独搭建webpack的时候才用的，也就是不是用vue-cli.
关于vue-cli 与webpack的关系可以看vue官方解释。
如果你用vue-cli3，而且只需要切换成英文， 你可以用以下步骤操作：
- 声明local模块(如果你用typescript才需要）
请留意下这个issue https://github.com/ElemeFE/element/issues/9084，但不影响你按照我的步骤操作
在src下创建一个shims-element-ui.d.ts , 有人说这个名字无关紧要（看这里），但是实践证明，typescript会拿shimes-后， .d.ts前， 也就是element-ui 这个来做点关联，所以你最好把这个文件命名为shims-element-ui.d.ts
image.png
shims-element-ui.d.ts 里面的内容是
declare module 'element-ui/lib/locale/lang/en' {
}
2.修改main.ts 在vue中注入local插件，关于vue.use(）的使用场景可以参考这里
import './class-component-hooks'
import Vue from 'vue'
import * as locale from 'element-ui/lib/locale/lang/en'
//import ...
//Vue.use...
Vue.use(ElementUI, {locale})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
但是这样修改还是没有作用，因为官网给出了一句话
image.png
所以还要修改webpack的配置
- 修改 vue.config.js, 添加webpack的配置， 关于vue cli的webpack的配置参考这里
//const...
const webpack = require('webpack');
module.exports = {
publicPath: process.env.VUE_APP_API_CONTEXT_PATH,
devServer: {
...
}
//...
configureWebpack: config=>{
config.plugins.push(new webpack.NormalModuleReplacementPlugin(/element-ui\/lib\/locale\/lang\/zh-CN/, 'element-ui/lib/locale/lang/en'))
}
}
到此，就可以重新启动项目了,成功修改成英文了。
image.png
