VueCLI项目中样式模块化后类名发生变化的原因

使用 Vue CLI 自动生成了一个项目，并在项目的根目录下创建了一个名为 style.module.css 的文件，内容如下：

然后，在 main.js 中通过以下代码导入了这个 CSS 文件：

运行 Vue CLI 服务时，发现浏览器中的 .center 类名变成了类似 .style-module_center_KPaYI 的奇怪名称。

这是由于 Vue CLI 使用了 CSS Modules 功能。CSS Modules 是一种 CSS 文件的加载方式，它会自动为每个类名生成唯一的哈希值，以确保样式的作用范围仅限于当前组件，避免全局样式的冲突。

如果你希望保持原始类名，可以在导入时禁用 CSS Modules。例如，可以将文件名改为普通的 style.css 或者在 Webpack 配置中调整 CSS Modules 的行为。

如果你确实需要使用 CSS Modules，但又想保留某些类名不被修改，可以通过在类名前加上双冒号 :: 来实现全局类名。例如：::global(.center) { ... }。