元素UI分页用中文而不是英文

Question

我开始使用非常好的Element UI组件，当我尝试使用

在项目中添加分页组件时

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
</el-pagination>

文字出现在这样的中文：

它也发生在JSFiddle sample上，但their website上没有发生。

你知道我怎么用英语呢？

Answer 1

我发现自己： 只需添加

<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>

和

<script>
    ELEMENT.locale(ELEMENT.lang.en)
</script>

Answer 2

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en'
import App from './App.vue'

Vue.use(ElementUI, { locale })

new Vue({
  el: '#app',
  render: h => h(App)
})

http://element.eleme.io/#/en-US/component/i18n

Answer 3

您要查找的是“国际化”：https://element.eleme.io/#/en-US/component/i18n

默认情况下，Element的语言为中文。如果您想使用其他语言，则需要进行一些i18n配置。

如果要完全导入Element ：（在条目文件中，通常在src中找到> main.js对其进行配置，如下所示）

import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(ElementUI, { locale })

但是，如果要按需导入Element而不是在整个应用程序中：

// Here we are importing only the Button and Select component from Element
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'

// configure language
locale.use(lang)

// import components
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

重要提示：即使使用其他语言，默认情况下也会导入中文包。但是，使用webpack提供的NormalModuleReplacementPlugin，您可以替换默认语言环境： 在您的webpack.config.js文件中

{
  plugins: [
   new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
  ]
}

Answer 4

如果您已经按照建议设置了语言环境，则可能是由于绑定不一致造成的：

1. 您的捆绑软件可能会内联element-ui/locale导入
2. 您的捆绑软件可能会将element-ui导入视为external
3. 因此，您将区域设置设置在文件的第二个副本上，而不是设置在元素UI本身之内
4. Element-ui然后从其自己的副本读取并忽略您的副本

（有关解决此类捆绑问题的真实PR，请参见https://github.com/3YOURMIND/kotti/pull/264）