【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“相关推荐

【Vue】 Error with Vue lazy loading components: “Failed to resolve async component“
文章目录可能出现问题的情况情况一:路径问题情况二:每个组件的name 值情况三:驼峰命名法问题方式一: 方式二: 情况四:vue1.0和2.0的写法不同情况五:组件中含有 style 标签 ...
【vue.js开发】如何在vue里面优雅的解决跨域，路由冲突问题
[vue.js开发]如何在vue里面优雅的解决跨域,路由冲突问题当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {'/goods/*': {target: 'http://l ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...
【Vue笔记一】第一个Vue程序及其语法
官网介绍:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用.Vue的核心库只关注视图层,不仅易于上手,还 ...
【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 今天 ...
【MYSQL用户创建报错】ERROR 1396 (HY000): Operation CREATE USER failed for ‘user1‘@‘%‘
1.创建用户的时候报错ERROR 1396 (HY000): Operation CREATE USER failed for 'user1'@'%' mysql> create user us ...
【原创纯手打】如何用VUE在拖拽小框中同步更换壁纸（附代码）
先看效果图先安装vue-drag-resize插件,如果不安装插件,我们写鼠标拖拽就会相对麻烦一些 cnpm install --save vue-drag-resize 然后在main.js中加入 ...
【黄啊码】PHP结合vue导出excel乱码
在这之前我们先回顾以前用php导出excel,我直接写成方法在这里: public static function phpExcelList($field, $list, $title='文件',$f ...

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

文章目录

失败方案：

方法一：删除每个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 Laravel-mix】Error with Vue lazy loading components: “Failed to resolve async component“相关推荐

最新文章

热门文章

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

文章目录

失败方案：

方法一：删除每个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 Laravel-mix】Error with Vue lazy loading components: “Failed to resolve async component“相关推荐

最新文章

热门文章

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

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