专栏首页技术的专栏vue Loading chunk selectpc failed
原创

vue Loading chunk selectpc failed

Uncaught TypeError: (intermediate value)(intermediate value).push is not a function

Loading chunk selectpc failed.

路由配置:,采用的是代码分割,异步加载。

   {
       path:'/selectpc',
       name:'selectpc',
       title:'选择省份城市',
       component: () => import(/* webpackChunkName: "selectpc" */ '20190520gov/views/selectpc.vue'),
   },
   ...

之前一直没问题,后来加了一个文件上传组件,就有问题了

              <div class="weui-uploader__input-box">
                <!-- <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="" /> -->
                <fileupload :fileurl.sync="apply_info.main_pic" :picwidth="1080" width_height="" class="weui-uploader__input" :onUploadFailed="uploadfailed" v-on:startupload="startupload"></fileupload>
              </div>

自己写的fileupload组件,也是常规写法。

搜了下原因,应该webpack构建时出现了什么包代码合并时的问题。没有引入fileupload组件时正常,引入后有问题。估计有什么冲突了,,时间不多暂时没时间看,把本路由页面异步加载去掉即可,:

  import Selectpc from '20190520gov/views/selectpc.vue'
    
    {
       path:'/selectpc',
       name:'selectpc',
       title:'选择省份城市',
       component: Selectpc, //() => import(/* webpackChunkName: "selectpc" */ '20190520gov/views/selectpc.vue'),
   },

具体里面可能的冲突,以后再看了。

——————————后续补充——————————

此问题貌似是一个很多人遇到的问题,没有好的根治办法,有一个柔性的容错办法,如下处理:

    //兼容处理:Loading chunk {n} failed 的问题
    router.onError((error) =>{
        const pattern = /Loading chunk (.+?) failed/g;
        const isChunkLoadFailed = error.message.match(pattern);
        const targetPath = router.history.pending.fullPath;
        if (isChunkLoadFailed && targetPath) {
            debugger
            if(typeof window!='undefined' && window.location){
                //带上参数
                window.location.replace(targetPath);
            }
            //router.replace(targetPath);
        }
    });

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue+webpack 你可能遇到的几种proxy或agent使用代理问题

    这了总结一下用vue+webpack开发中可能遇到的各种proxy问题。希望能帮助到各位有需要的人。

    shirishiyue
  • webpack构建了不相关的文件夹

    某次开发完后,构建,发现一个小应用,怎么构建出来这么多chunk文件?

    shirishiyue
  • vue获取当前视图组件对象

    想在console中调试查看vue对象的数据情况,奈何没有入口,全局的vue对象可以挂出来,但是没法定位到具体的视图对象。

    shirishiyue
  • Node入门教程(3)第二章: Node 安装

    Node 安装 官网下载地址: https://nodejs.org/en/download/ 安装方式 windows 下安装 建议直接选择:Windows ...

    老马
  • 一文读完GitHub30+篇顶级机器学习论文(附摘要和论文下载地址)

    作者:常佩琦 弗格森 【新智元导读】 今天介绍Github上的开源项目,专门用于更新最新的研究突破,具体说来,就是什么算法在哪一个数据集上取得了state-of...

    新智元
  • 图像语义分割综述

    论文:Fully Convolutional Networks for Semantic Segmentation 2015CVPR

    languageX
  • LabelEnc: A New Intermediate Supervision Method for Object Detection

    绝命生
  • 资源 | 囊括欧亚非大陆多种语言的25个平行语料库数据集(拿走不谢!)

    原文链接:https://gengo.ai/datasets/25-best-parallel-text-datasets-for-machine-transl...

    机器之心
  • 学术丨深度学习零基础进阶第四弹​

    AI 科技评论曾编译了《干货分享 | 深度学习零基础进阶大法!》系列,相信读者一定对深度学习的历史有了一个基本了解,其基本的模型架构(CNN/RNN/LSTM)...

    AI科技评论
  • requests实战技术

    IT故事会

扫码关注云+社区

领取腾讯云代金券