Element-ui 组件出现字符乱码的问题

Element-ui 组件出现字符乱码的问题

Vue项目中使用了element ui的组件：分页、日期时间选择器

---

问题描述

今天测试反馈了一个问题，测试环境的页面中element ui 的组件：分页、日期选择器、列表 有出现字符变成乱码的情况

对此我首先感觉非常奇怪，测试是一直在使用这个页面的，昨天都并无问题，今天怎么就出问题了捏，于是开始了一系列排查操作：

1.

在本地运行，发现并无问题，是正常显示的。

2.

难道是build打包后出错了？于是我重新打包，服务器部署，还是一样有乱码，想来也不可能打包时候出错，毕竟上一次部署都是在大半年前，而且昨天都没问题。

3.

搜索看下有无相似问题，搜索结果:绝大部分问题都是icon图标乱码的问题，我的问题是既有中文变乱码，也有数字变乱码。在element的github中的lssues中 也没有找到类似的问题。

---

原因分析：

既然网上没有类似问题，那只能自己接着找，本身问题排查了，那有没有可能是依赖组件的问题，先检查CDN，在public/index.html文件中，我之前有引入过官方的CDN：

<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>

直接复制CDN链接“https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js”到浏览器打开，全局搜索关键字，既然是日期时间选择器，先搜索“year”,如下：
191条，眼都看花了，换一个关键字“week”，如下：
找到了，果然变成了乱码，看来是这个CDN的问题，换一个CDN，于是去官网查看，如下:
官方最新的CDN

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

---

解决方案：

在public/index.html文件中，把之前引入的CDN更换为最新的CDN，重新build打包部署服务器，正常显示了，问题解决。

<!-- 之前引入的CDN -->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script> -->
<!-- 最新的CDN -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

------------时间分割线---------------
2023/12/20 看到评论反馈及测试，发现官网最新的CDN有时候访问不了，所以再分享一下我的解决办法：

1.

访问官网最新CDN，然后下载下来，放到服务器中当静态资源访问（我的做法）。下载下来放本地引入，也有试过，好像不行。

2.

更换这种按需引入的方式，如果用的是Vue的话，可以换成npm包引入。

寄语

第一次分享，有不足之处多多包涵，给遇到相同或者类似的问题的朋友一些参考，希望能有所帮助！