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应用程序能够在所有浏览器上正确运行。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Vue3.x的版本中build后dist文件中出现legacy的js文件问题 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • JS实现焦点图轮播效果的方法详解

    JS实现焦点图轮播效果的方法详解 焦点图(Carousel)是一个在网页中展示图片或其他内容的流行方式,焦点图的特点是在页面的顶部或中央用封面的图片展示网站重点内容,引导用户进入网站的内页。在网页设计中,焦点图常常是网页布局中非常重要的部分,所以实现一个好的焦点图轮播效果至关重要。 在本文中,我将从JavaScript实现焦点图轮播效果的角度,为大家介绍焦点…

    Vue 2023年5月28日
    00
  • 详解spring cloud ouath2中的资源服务器

    下面是“详解Spring Cloud OAuth2中的资源服务器”的攻略: 1. 背景 在微服务架构中,通常需要一个安全的方式来处理跨服务之间的数据交换。OAuth2是最常见的安全授权标准之一,Spring Cloud OAuth2是一个基于Spring Boot的OAuth2开发框架,提供了非常便捷的使用方式。 本文将详细介绍如何搭建一个Spring Cl…

    Vue 2023年5月28日
    00
  • 简单设置el-date-picker的默认当前时间问题

    下面是详细讲解如何设置 el-date-picker 的默认当前时间的攻略: 1.需求分析 当我们使用 el-date-picker 来选择日期时,默认展示的日期为当前日期,这在大部分场景下都是符合要求的。但有时候我们需要默认选中其他日期,比如一个从某一具体日期开始的查询页面。 在这种情况下,我们就需要设置 el-date-picker 的默认当前时间,让它…

    Vue 2023年5月29日
    00
  • Vue实现简单的跑马灯

    下面是使用Vue实现简单的跑马灯的完整攻略: 1. 准备工作 首先需要引入Vue库,以及一些基础的CSS样式(可根据需要自行添加): <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue跑马灯</ti…

    Vue 2023年5月27日
    00
  • Vue 中生命周期定义及流程

    Vue 中的生命周期是指 Vue 实例从创建、运行、更新、销毁等一系列事件的过程。在 Vue 实例的生命周期中,Vue 提供了一系列的钩子函数在用户自定义的 JavaScript 代码中执行,可以进行一系列的业务逻辑处理。 Vue 的生命周期分为八个阶段: beforeCreate (创建前) created (已创建) beforeMount(安装前) m…

    Vue 2023年5月28日
    00
  • element日历calendar组件上月、今天、下月、日历块点击事件及模板源码

    下面是详细讲解 “element 日历 calendar 组件上月、今天、下月、日历块点击事件及模板源码”的完整攻略。 1. 功能说明 element 日历 calendar 组件是一款强大的日期选择组件,常用于项目中的日期选择、预约等场景。在本篇攻略中,将详细讲解其上月、今天、下月、日历块点击事件及模板源码等内容。 上月、下月按钮点击事件:点击上月、下月后…

    Vue 2023年5月29日
    00
  • vue中methods、mounted等的使用方法解析

    对于这个问题,我会提供一个完整的攻略,包括以下内容: methods和mounted的基础用法 methods中使用箭头函数的注意事项 mounted中this的指向问题 示例说明 1. methods和mounted的基础用法 在Vue中,methods和mounted是两个非常常用的属性,分别用来定义组件的方法和生命周期函数。其中,methods用来定义…

    Vue 2023年5月28日
    00
  • uni-app常用的几种页面跳转方式总结

    关于“uni-app常用的几种页面跳转方式总结”,我可以给出一份完整攻略,并介绍两种具体的示例。 uni-app常用的几种页面跳转方式总结 一、vue-router vue-router 是 vue.js 官方的路由插件。在 uni-app 中,我们可以通过引入 vue-router 并为每个页面指定路由,来进行页面间的跳转。 具体操作步骤如下: 1. 安装…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部