Vue3.x的版本中build后dist文件中出现legacy的js文件问题

Vue 3.x的版本中build后dist文件中出现legacy的js文件问题，是由于在Vue 3.x的版本中，开发团队加入了 Webpack 5 的新特性—— 模块还原 /esModule，这些变化导致了一些旧版浏览器中无法兼容这些新特性，因此需要生成一个legacy版本的js文件来兼容这些浏览器。

以下是如何解决这个问题的完整攻略：

1.修改 package.json 的 build 命令

在 package.json 的 build 命令中，使用 --target 属性来指定编译的浏览器版本，例如以下代码：

"build": "vue-cli-service build --target 'es5' --modern"

在这个命令中，我们将编译目标设置为 ES5（旧版浏览器），并使用了 --modern 来同时生成一个现代（支持较新浏览器）和一个旧版兼容文件。当命令完成时，dist 文件夹中应该会出现两个文件夹，一个名为 legacy，另一个名为 modern。

2.修改 vue.config.js 文件

如果你已经使用了 vue-cli 4.x 及更高版本，则可以通过 vue.config.js 文件来配置目标浏览器版本并生成对应的legacy文件。在vue.config.js文件中添加以下代码：

module.exports = {
  productionSourceMap: false,
  configureWebpack: {
    output: {
      filename: '[name].[hash:8].js',
      chunkFilename: '[name].[hash:8].js',
    },
  },
  chainWebpack: (config) => {
    config.when(process.env.NODE_ENV === 'production', (config) => {
      config.optimization.delete('splitChunks');
      config.output.filename('[name].[hash:8].js').end();
      config.output.chunkFilename('[name].[hash:8].js').end();
      config.module.rule('vue').use('vue-loader').tap((options) => {
        options.compilerOptions.whitespace = 'preserve';
        return options;
      });
      config.module.rule('images').test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/).use('url-loader').loader('url-loader').end();
    });

    config.when(process.env.NODE_ENV === 'development', (config) => {
      config.optimization.splitChunks(false);
    });

    config.when(process.env.NODE_ENV === 'production' && process.env.VUE_APP_MODE === 'legacy', (config) => {
      config.entry('app').clear().add('./src/main-legacy.js');
      config.performance.hints(false);
      config.output.filename('js/[name].[hash:8].legacy.js').end();
      config.output.chunkFilename('js/[name].[hash:8].legacy.js').end();
      config.module.rule('vue').use('vue-loader').tap((options) => {
        options.compilerOptions.modules = [
          {
            preTransformNode(astEl) {
              if (process.env.NODE_ENV === 'production') {
                if (options.functional) {
                  astEl.functional = true;
                  const { props } = astEl;
                  if (props) {
                    props.forEach((prop) => {
                      if (prop.type === 1) {
                        prop.value = `__$props[\'${prop.name}\']`;
                        delete prop.name;
                      }
                    });
                  }
                }
              }
              return astEl;
            },
          },
        ];
        return options;
      });
    });
  },
};

该代码将在有需要时，按照指定的方式对目标浏览器版本进行自定义构建，并生成对应的旧版兼容文件。

在以上代码中，我们通过添加 process.env.VUE_APP_MODE 环境变量来指示使用指定的构建模式生成旧版兼容文件。

总结

在Vue 3.x的版本中build后dist文件中出现legacy的js文件问题，可以通过两种方法来解决这个问题。第一个方法是在 package.json 的 build 命令中添加 --target 属性来指定编译目标，并同时生成现代和旧版兼容文件。第二个方法是在 vue.config.js 文件中自定义构建并生成旧版兼容文件。无论使用哪种方法，你都可以有效地解决这个问题，确保你的Vue应用程序能够在所有浏览器上正确运行。