Vue.js延迟加载

Question

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

https://v2.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'));
     |                                ^

这里可能出了什么问题？当我注册组件"正常"时，一切正常？

Answer 1

从评论中看。您需要指定 publicPath。这是一个工作 webpack.mix 的小型版本.js文件在 laravel 5.5 上使用 laravel-mix 进行了测试

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现在终于只需在边栏选项卡中引用你的应用.js文件

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

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