【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“的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。