【Vue Laravel-mix】
报错信息：
Error with Vue lazy loading components: “Failed to resolve async component“
uncaught error during route navigation
cann’t xxxxx 'call ’
bootstrap.js(63)

参考https://github.com/JeffreyWay/laravel-mix/issues/2064 中所有的解决方法，均没有修改功能

文章目录

  • 失败方案：
    • 方法一：删除每个vue文件中的style标签及其内容，结果删除所有style标签之后，仍报错（失败）
    • 方法二：降级 laravel-mix: ^3.0 ，结果会产生css-loader 找不到等其他的错误（失败）
    • 方法三：chunk文件，即在 webpack.mix.js 文件中 `output.chunkFilename: 'js/chunk/[name].js?v=[chunkHash]'`，仍旧报错（失败）
    • 方法四：添加异步加载插件`@babel/plugin-syntax-dynamic-import`，
      • 方法四-1：
      • 方法四-2：
  • 成功的分隔线

失败方案：

方法一：删除每个vue文件中的style标签及其内容，结果删除所有style标签之后，仍报错（失败）

方法二：降级 laravel-mix: ^3.0 ，结果会产生css-loader 找不到等其他的错误（失败）

方法三：chunk文件，即在 webpack.mix.js 文件中 output.chunkFilename: 'js/chunk/[name].js?v=[chunkHash]'，仍旧报错（失败）

 mix.webpackConfig(output: {publicPath: '/', // 不加会报语法错误chunkFilename: 'js/chunk/[name].js?v=[chunkHash]' // 分割文件存放位置， }})

方法四：添加异步加载插件@babel/plugin-syntax-dynamic-import，

方法四-1与 方法四-2 本质是一样的，只是配置方式不一样哈

方法四-1：

npm install -D @babel/plugin-syntax-dynamic-import# webpack.mix.js
mix.babelConfig({plugins: ['@babel/plugin-syntax-dynamic-import']
});

方法四-2：

# babel.rc
{"presets": ["@vue/babel-preset-jsx","@babel/preset-env"],"plugins": ["@babel/plugin-syntax-dynamic-import"]
}

成功的分隔线

# package.json
{"private": true,"scripts": {"dev": "npm run development","development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js","watch": "npm run development -- --watch","watch-poll": "npm run watch -- --watch-poll","hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js","prod": "npm run production","production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"},"devDependencies": {"admin-lte": "^3.0.5","axios": "^0.19.2","bootstrap": "^4.5.2","cross-env": "^5.2.1","css-loader": "^1.0.0","echarts": "^4.9.0","element-ui": "^2.13.2","jquery": "^3.5.1","js-sha256": "^0.9.0","laravel-mix": "^5.0.7","lodash": "^4.17.20","resolve-url-loader": "^3.1.0","sass": "^1.29.0","sass-loader": "^8.0.2","vue": "^2.6.12","vue-clipboard2": "^0.3.1","vue-fullscreen": "^2.1.6","vue-loader": "^15.9.3","vue-router": "^3.4.3","vue-style-loader": "^4.1.2","vue-template-compiler": "^2.6.12"}
}
# webpack.mix.js
const mix = require('laravel-mix');/*|--------------------------------------------------------------------------| Mix Asset Management|--------------------------------------------------------------------------|| Mix provides a clean, fluent API for defining some Webpack build steps| for your Laravel application. By default, we are compiling the Sass| file for the application as well as bundling up all the JS files.|*/mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css').version().webpackConfig({externals: {'vue': 'Vue', //这些是你不需要webpakc帮你打包的库'vue-router': 'VueRouter','element-ui': 'ELEMENT', //这个比较坑　一开始以为是ElementUI结果就报错了,},output: {publicPath: '/', // 不加会报语法错误chunkFilename: 'js/chunk/[name].js?v=[chunkHash]' // 分割文件存放位置}}).sourceMaps();
# 父组件：
<template><child></child>
</template>
<script>
报错方式：
import child from "../components/child";
export default {components: {child,},
}运行正常方式：
export default {components: {child: ()=>import("../components/child"),},
}
</script>

【Vue Laravel-mix】Error with Vue lazy loading components: “Failed to resolve async component“相关推荐

  1. 【Vue】 Error with Vue lazy loading components: “Failed to resolve async component“

    文章目录 可能出现问题的情况 情况一:路径问题 情况二:每个组件的name 值 情况三:驼峰命名法问题 方式一: 方式二: 情况四:vue1.0和2.0的写法不同 情况五:组件中含有 style 标签 ...

  2. 【vue.js开发】如何在vue里面优雅的解决跨域，路由冲突问题

    [vue.js开发]如何在vue里面优雅的解决跨域,路由冲突问题 当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {'/goods/*': {target: 'http://l ...

  3. 【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架

    [Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...

  4. 【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI

    前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...

  5. 【Vue笔记一】 第一个Vue程序及其语法

    官网介绍:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用.Vue的核心库只关注视图层,不仅易于上手,还 ...

  6. 【MySQL】【数据库编码问题】ERROR 1366 (HY000): Incorrect string value: '\xC0\xEE\xC7\xBF' for column

    [MySQL]ERROR 1366 (HY000): Incorrect string value: '\xC0\xEE\xC7\xBF' for column 'SNAME' at row 1 今天 ...

  7. 【MYSQL用户创建报错】ERROR 1396 (HY000): Operation CREATE USER failed for ‘user1‘@‘%‘

    1.创建用户的时候报错ERROR 1396 (HY000): Operation CREATE USER failed for 'user1'@'%' mysql> create user us ...

  8. 【原创纯手打】如何用VUE在拖拽小框中同步更换壁纸（附代码）

    先看效果图 先安装vue-drag-resize插件,如果不安装插件,我们写鼠标拖拽就会相对麻烦一些 cnpm install --save vue-drag-resize 然后在main.js中加入 ...

  9. 【黄啊码】PHP结合vue导出excel乱码

    在这之前我们先回顾以前用php导出excel,我直接写成方法在这里: public static function phpExcelList($field, $list, $title='文件',$f ...

最新文章

  1. 2019年前端的3个趋势
  2. 树莓派学习——音频视频播放
  3. MVC5管道处理模型
  4. Pycharm中代码自动换行(亲测)
  5. mysql strtok,strtok()和strtok_r()
  6. 本题要求实现一个用选择法对整数数组进行简单排序的函数。_通俗易懂讲 Python 算法：快速排序...
  7. Nmap的高级扫描（脚本）
  8. 【神经网络】给初学者们讲解人工神经网络（ANN）
  9. SAP License：今天你‘牺牲’了吗？
  10. zlib 加密 java_JAVA自带Zlib+base64位压缩加密和解压解密
  11. vue组件独享守卫钩子函数参数详解（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）...
  12. DPDK 实现的不完全笔记
  13. JAVA中构造方法说法_关于Java程序的构造方法，说法错误的是（ ）
  14. 分布式消息系统jafka快速起步（转）
  15. mongoVue 对mongodb的操作
  16. tail -f 命令详解
  17. j90度度复数运算_虚数i的运算公式及实际意义
  18. GNU Trove trove4j
  19. 互联网产品经验小分享——关于“虚荣指标”的思考（2020.8.3）
  20. oracle系统计算工资,基于Oracle EBS的工资核算系统的设计与实现

热门文章

  1. 如何使用hyperopt对xgboost进行自动调参
  2. 蓝桥杯_算法训练_大小写转换
  3. 201.09.22 除虫药水（线性dp）
  4. ubuntu 安装 docky
  5. 关于Java中final关键字的详细介绍
  6. ASP.NET内置对象的总结
  7. 蹭课神器NABCD分析
  8. FreeRTOS 中断优先级嵌套错误引发HardFault异常解决
  9. MQTT数据接收流程之数据处理回调函数注册(基于LWIP/RDA8955平台）
  10. CentOS7使用yum安装Nginx