vue-cli3项目生产和测试环境分包后文件名和数量不一致解决

 更新时间:2023年05月29日 09:57:09   作者:zoufengrui  
这篇文章主要为大家介绍了vue-cli3项目生产和测试环境分包后文件名和数量不一致解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

正文

我用vue-cli3搭建的项目,在进行webpack按需分包之后,生产环境打包和测试环境打包出来的文件名和数量不一致:


对于生产环境的包,能正确的将文件按照页面分包打包出来,而测试环境的打包只能打包成1.js,2.js这种,并且少了chunk.js

我的vue.config.js配置如下

chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("./src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("containers", resolve("src/containers"))
      .set("service", resolve("src/service"))
      .set("utils", resolve("src/utils"))
      .set("store", resolve("src/store"))
      .set("config", resolve("src/config"))
      .set("pubilc", resolve("pubilc"));
    config.output.filename("static/js/[name].[hash].js").end();
  },
  configureWebpack: config => {
    config.optimization = {
      runtimeChunk: "single",
      splitChunks: {
        chunks: "all",
        maxInitialRequests: Infinity,
        minSize: 20000,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              const packageName = module.context.match(
                /[\\/]node_modules[\\/](.*?)([\\/]|$)/
              )[1];
              return `npm.${packageName.replace("@", "")}`;
            },
          },
        },
      },
    };
  },

请问如何改能将测试环境的打包内容改成和生产环境一样呢?

补充 package.json里面的命令

"build": "vue-cli-service build",
"uat": "vue-cli-service build --mode test",

 因为vue-clitest会有一些process.env.NODE_ENV === 'test'的判断,所以想和线上环境一样最简单的办法就是不用它的mode

"build": "vue-cli-service build",
"uat": "vue-cli-service build --mode mytest",

以上就是vue-cli3项目生产和测试环境分包后文件名和数量不一致解决的详细内容,更多关于vue-cli3分包文件不一致的资料请关注脚本之家其它相关文章!

相关文章

  • vue.js利用Object.defineProperty实现双向绑定

    vue.js利用Object.defineProperty实现双向绑定

    这篇文章主要为大家详细介绍了vue.js利用Object.defineProperty实现双向绑定,帮大家解析神秘的Object.defineProperty方法
    2017-03-03
  • vue3下watch的使用方法示例

    vue3下watch的使用方法示例

    vue3中的watch是一个组合式的API使用时需要引入,下面这篇文章主要给大家介绍了关于vue3下watch使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • 详解vue-cli中配置sass

    详解vue-cli中配置sass

    本篇文章主要介绍了详解vue-cli中配置sass ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 关于vue项目proxyTable配置和部署服务器的问题

    关于vue项目proxyTable配置和部署服务器的问题

    这篇文章主要介绍了关于vue项目proxyTable配置和部署服务器的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue v-on传递参数和事件修饰符的使用

    vue v-on传递参数和事件修饰符的使用

    本文主要介绍了vue v-on传递参数和事件修饰符的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01
  • vue播放flv、m3u8视频流(监控)的方法实例

    vue播放flv、m3u8视频流(监控)的方法实例

    随着前端大屏页面的逐渐壮大,客户的...其中实时播放监控的需求逐步增加,视频流格式也是有很多种,用到最多的.flv、.m3u8,下面这篇文章主要给大家介绍了关于vue播放flv、m3u8视频流(监控)的相关资料,需要的朋友可以参考下
    2023-04-04
  • vue中预览zip的实现示例

    vue中预览zip的实现示例

    打包压缩成zip的东西,再解压,很麻烦,本文主要介绍了vue中预览zip的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • vue2结合element-ui的gantt图实现可拖拽甘特图

    vue2结合element-ui的gantt图实现可拖拽甘特图

    因为工作中要用到甘特图,所以我在网上搜索可以用的甘特图,搜索了好多,但是网上搜到大多数都很鸡肋,不能直接使用,下面这篇文章主要给大家介绍了关于vue2结合element-ui的gantt图实现可拖拽甘特图的相关资料,需要的朋友可以参考下
    2022-11-11
  • 关于element-ui日期时间选择器选不中12小时以后的时间详解

    关于element-ui日期时间选择器选不中12小时以后的时间详解

    在之前做个一个组件页面中,引用了element-ui组件的日期选择器,遇到的一个小问题,下面这篇文章主要给大家介绍了关于element-ui日期时间选择器选不中12小时以后时间的相关资料,需要的朋友可以参考下
    2022-08-08
  • Composition Api封装业务hook思路示例分享

    Composition Api封装业务hook思路示例分享

    这篇文章主要为大家介绍了Composition Api封装业务hook的思路示例分享,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07

最新评论