【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. PyPI又双叒叕发现恶意软件,能盗取信用卡还有后门程序
  2. koa 接口返回数据_koa-api
  3. 回顾线程的竞争机制-重量级锁
  4. mysql主从代替技术_mysql主从复制及失败切换
  5. Equals,ReferenceEquals,==的区别
  6. python3数字类型_python3笔记八:python数据类型-Number数字
  7. Ansible(五)远程创建用户并对密码进行加密设置
  8. ActiveMQ从入门到精通(二)
  9. Spring Aop技术原理分析
  10. 倾心家教安卓案例开发代码_你或许从未听过的20个安卓开发工具
  11. 云计算相关的一些概念Baas、Saas、Iaas、Paas
  12. 家用智能门锁常见的开锁方式,主要有哪些?
  13. matlab和vc联合编程
  14. xps15u盘装linux,戴尔XPS 15 9575笔记本安装win10系统的操作教程
  15. TestBench 基本写法与框架
  16. [不务正业系列] 致-陪我们长大的周董
  17. swift json解析 JSONSerialization
  18. MongoDB设置账号密码
  19. python to_excel 时间格式_分别用Excel和python进行日期格式转换成时间戳格式
  20. BCK生态链第一条价值共识侧链CK正式上线

热门文章

  1. Py之pygame:Python的pygame库的简介、安装、使用方法详细攻略
  2. 封装汉语自然语言处理中的常用方法(附代码:生成中文词云)
  3. Spring Boot后端+Vue前端+微信小程序,完整的开源解决方案!
  4. appium+python自动化33-解锁九宫格(TouchAction)
  5. Flash Builder4.6 无法启动,并且报 Failed to create the Java Virtual Machine (2—可能更好些)...
  6. PHP 之旅 基础语法(二)
  7. 重置SVN用户名与密码,修改SVN的IP地址
  8. LINQ从方法中返回查询
  9. Item 29. Virtual Constructors and PrototypeItem 30. Factory Method
  10. Windows下配置单机Hadoop环境