vue-cli脚手架配置项 之 css.extract 可能需要注意的地方, 你的项目生产环境下出问题了吗?

1.文档

Default: 生产环境下是 true，开发环境下是 false

是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。

同样当构建 Web Components 组件时它总是会被禁用 (样式是 inline 的并注入到了 shadowRoot 中)。

当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS。

提取 CSS 在开发环境模式下是默认不开启的，因为它和 CSS 热重载不兼容。然而，你仍然可以将这个值显性地设置为 true
在所有情况下都强制提取。

2. 动态注入到 JavaScript 中的 inline 代码是指:

具体来说，Webpack 会将组件中的样式代码转换成 JavaScript 对象，然后在组件的 JavaScript 代码中创建一个
style 标签，将这个对象转换成 CSS 样式，并将其插入到这个 style 标签中。最后，Webpack 会将这个 style
标签插入到 HTML 页面中，以动态注入样式

3. 区别

1. css.extract = true 则提取css成为外部文件, 而不是inline方式–>动态JavaScript注入, 这样的话网络就需要请求额外的css文件, 但是JavaScript代码会变少
2. css.extract = false 不需要请求额外的css文件, 但是JavaScript代码会变多

4. 注意点

• 从工程构建的角度, 这是两种不同的css处理模式, vue-cli默认值开发环境和生产环境不一致, 所以不能保证开发环境, 生产环境完全一致, 如果出现css问题可能需要在配置文件手动指定css.extract的值