【vue】如何修改chainWebpack让vue 打包后 style加type=“text/css“

要在 Vue.js 项目中使用 chainWebpack 来修改打包后的样式标签（<style>），使其包含 type="text/css" 属性，你可以通过以下步骤来实现：

1、安装必要的依赖：确保你已经安装了 @vue/cli-plugin-style-resources-loader 和 html-webpack-plugin（如果需要的话）。
2、修改 vue.config.js 文件：使用 chainWebpack 来修改 <style> 标签。
示例代码
首先，在 vue.config.js 文件中，你需要使用 chainWebpack 来访问 HtmlWebpackPlugin 的实例，并修改 <style> 标签。但是请注意，HtmlWebpackPlugin 不会直接生成 <style> 标签，这些标签通常是由 Webpack 的 ExtractTextPlugin 或 mini-css-extract-plugin 插件生成的。因此我们需要在最终生成的 HTML 文件中查找并修改这些 <style> 标签。

假设你想要在最终生成的 HTML 文件中的所有 <style> 标签中添加 type="text/css"，可以使用以下方法：

// vue.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  chainWebpack: config => {
    // 获取 HtmlWebpackPlugin 的实例
    const htmlPlugin = config
      .get('plugins')
      .find(p => p.constructor.name === 'HtmlWebpackPlugin');

    if (htmlPlugin) {
      // 修改 HtmlWebpackPlugin 的配置
      htmlPlugin.tap(options => {
        options[0].afterBodyEnd = function(html) {
          // 修改 <style> 标签的 type 属性
          return html.replace(/<style\b[^>]*>/g, (match) => {
            if (!match.includes('type=')) {
              return match + ' type="text/css"';
            }
            return match;
          });
        };
        return options;
      });
    }
  }
};

解释
引入 HtmlWebpackPlugin：在文件顶部引入 HtmlWebpackPlugin。
使用 chainWebpack：使用 chainWebpack 来访问 Webpack 配置。
获取 HtmlWebpackPlugin 实例：使用 config.get('plugins').find() 来找到 HtmlWebpackPlugin 的实例。
修改配置：使用 .tap() 方法来修改 HtmlWebpackPlugin 的配置。
修改 <style> 标签：使用正则表达式来查找 <style> 标签，并为那些没有 type 属性的标签添加 type="text/css"。
注意事项
这个方法只适用于最终生成的 HTML 文件中直接嵌入的 <style> 标签。如果你使用的是外部 CSS 文件，这些文件不会被这个方法影响。
如果你使用的是 Vue CLI 3 或更高版本，那么默认情况下 <style> 标签会被提取到单独的 CSS 文件中，而不是内联到 HTML 文件中。因此，这种方法可能不适用。
如果你确实需要在最终的 CSS 文件中添加 type="text/css"，那么你需要使用 mini-css-extract-plugin 的选项来控制输出的 <link> 标签。不过，现代浏览器默认会识别 CSS 文件，所以通常不需要显式地指定 type="text/css"。