[ElementUI] 修改默认语言为英文 el-table f

写这篇文章的起因是用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，而且只需要切换成英文， 你可以用以下步骤操作：

1. 声明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的配置

3. 修改 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