【vue】打包时script标签增加type=“text/javascript“

在 Vue.js 中，当你使用 Webpack 进行打包时，默认情况下，脚本标签 <script> 的 type 属性会被设置为 module 或 text/javascript，具体取决于你的配置和使用的构建工具版本。如果你想要确保输出的 <script> 标签包含 type="text/javascript"，可以通过修改 Vue CLI 配置来实现。

在 vue.config.js 文件中，chainWebpack 允许您以链式的方式配置 Webpack，但它并没有提供直接获取 HtmlWebpackPlugin 实例的方法。

注：使用 Vue CLI 3 及以上版本
1、创建 vue.config.js 文件：如果你还没有这个文件，需要在项目的根目录下创建一个 vue.config.js 文件。
2、修改配置：在 vue.config.js 文件中，你可以使用 chainWebpack 方法来自定义 Webpack 配置。

3、安装 html-webpack-plugin：确保你已经安装了 html-webpack-plugin。
4、使用 configureWebpack：可以通过 configureWebpack 配置项来直接修改 HtmlWebpackPlugin 的配置。

下面是一个示例，展示如何使用 configureWebpack 来修改 <script> 标签的 type 属性：

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

module.exports = {
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin({
        // ... 其他配置 ...
        afterBodyEnd: function(html) {
          // 修改 <script> 标签的 type 属性
          return html.replace(/<script\b[^>]*>/g, (match) => {
            if (!match.includes('type=') && !match.includes('type="module"')) {
              return match + ' type="text/javascript"';
            }
            return match;
          });
        },
      })
    ]
  }
};

说明

• 引入 HtmlWebpackPlugin：首先引入 HtmlWebpackPlugin。
• 配置 HtmlWebpackPlugin：在 configureWebpack 中添加 HtmlWebpackPlugin，并定义 afterBodyEnd 函数来修改最终输出的 HTML 文件中的 <script> 标签。
• 修改 <script> 标签：使用正则表达式来查找 <script> 标签，并为那些没有 type 属性的标签添加 type="text/javascript"。

注意

• 如果你的项目中有多个 HTML 文件，你可能需要为每个 HTML 文件配置一个单独的 HtmlWebpackPlugin 实例。
• 如果你使用的是 Vue CLI 3.x，你可能需要稍微调整上面的配置，因为 Vue CLI 3.x 默认使用 HtmlWebpackPlugin 来生成 HTML 文件。
• 如果您正在使用 Vue CLI 3.x 或更高版本，您还可以通过 chainWebpack 来修改 HtmlWebpackPlugin 的配置，但您需要手动获取插件的实例。这里是一个使用 chainWebpack 的示例：

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

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

说明

• 获取 HtmlWebpackPlugin 实例：使用 config.get('plugins').find() 来找到 HtmlWebpackPlugin 的实例。
• 修改配置：使用 .tap() 方法来修改 HtmlWebpackPlugin 的配置。