采坑道路4：vite报错（vue3.0+element-plus ）由一个语言包引起的问题

事情起因：在用element-plus写分页的时候，发现默认的样式始终是英文，如图：

因为想转成中文，在尝试各种方法无果后，只能寻求度娘了，发现处理的方法都一样

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {
  locale: zhCn,
})

天真的以为这样就好了，结果发现浏览器报了一个错误

很奇怪。是不是，刚开始以为是路径不对，后来发现路径没问题，难道要我去改源码？肯定不对…又是经过一轮的搜索，我猜是用的包管理器vite的问题。毕竟这个东西也是新出的，有奇奇怪怪的问题也不是没可能，通过百度，Google各种找文档，排除法，最终锁定一个vite.config.js配置文件里面一个问题。官网是这样描述的

Vite中文官网文档链接

通过搜索找到这个配置文件 optimizeDeps.include的写法

  optimizeDeps: {
    include: ['element-plus/lib/locale/lang/zh-cn'],
  },

到这里以为就好了？那就大错特错了…

我所使用的element-plus版本是1.0.2-beta.71
这里有一个小坑，在1.0.2-beta.59 之前可以使用上面的写法，但在1.0.2-beta.59及之后版本（目前到1.0.2-beta.71）官方提供了另外一种写法：
element-plus官网链接

---

所以最终的做法
在vite.config.js里加上

optimizeDeps: {
    include: ['element-plus/lib/locale/lang/zh-cn'],
  },

在App.vue里

<template>
  <el-config-provider :locale="locale">
    <router-view />
  </el-config-provider>
</template>
<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'

import zhCn from 'element-plus/lib/locale/lang/zh-cn'

export default defineComponent({
  components: {
    ElConfigProvider,
  },
  setup() {
    return {
      locale: zhCn,
    }
  },
})
</script>

然后大功告成！