Vue.js 延迟加载答案

【问题标题】：Vue.js lazy loadingVue.js 延迟加载
【发布时间】：2018-04-28 10:34:31
【问题描述】：

我正在使用 Laravel mix 来编译我的 vue.js 组件。现在我想延迟加载我在这里找到的组件：

https://vuejs.org/v2/guide/components.html#Async-Components

当我尝试这个时：

Vue.component('setting', () => import('./components/settings/setting.vue'));

我明白了：

 error  in ./resources/assets/admin/vue/core.js

Syntax Error: Unexpected token (36:31)

  34 |  */
  35 |
> 36 | Vue.component('setting', () => import('./components/settings/setting.vue'));
     |                                ^

这里可能有什么问题？当我注册组件“正常”时，一切正常？

【问题讨论】：

你在用dynamic import
不，我不使用那个
Laravel mix 在后台使用 webpack，为了使代码拆分功能正常工作，您需要使用动态导入。这是来自webpack
@zeidanbm 我现在可以正常工作了。但是如何设置 webpack 查找 javascript 文件的路径？因为现在它正在寻找错误的路径。

标签： javascript laravel vue.js laravel-mix

【解决方案1】：

从 cmets 开始。您需要指定公共路径。这是一个使用 laravel-mix 在 laravel 5.5 上测试的 webpack.mix.js 文件的小版本

const { mix } = require('laravel-mix');
mix.setPublicPath('public/');



mix.webpackConfig({
    output: {
      chunkFilename: 'js/[name].[chunkhash].js',
         publicPath: '/'
     },
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              presets: ['babel-preset-env'],
              plugins:['babel-plugin-dynamic-import-webpack']
            }
        },

  ]
    }
});


mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.version();

您的 manifest.json 可能生成了错误的路径，因此 webpack 无法找到正确的块文件路径。因此，您的解决方案是修改路径或仅使用默认路径，如上例所示。上面的代码应该在 public/js 中生成 app.js 以及分块文件。它还将在公共目录中生成 manifest.json 现在终于在你的刀片中引用你的 app.js 文件

<script src="{{mix('/js/app.js')}}"></script>

请注意，您需要安装 babel loader 和 babel 动态导入插件，首先需要能够在 webpack 中使用 babel 插件，因为我不确定 laravel mix 是否读取 .babelrc 文件，如果它读取了，那么应该够了

【讨论】：

感谢它现在编译到正确的位置。但是当我查看我的网络选项卡时，它正在寻找错误的路径。我该如何配置呢？
我认为您指的是刀片指定的路径？你是用 webpack 生成的，散列的 js 文件吗？
我应该如何以及如何在刀片文件中引用？
我编辑了答案以澄清几件事。希望这会有所帮助。