如何设置 Laravel Mix 来构建异步 Vue.js 组件？

我使用异步组件加载。一切正常，但并不完全如我们所愿。Laravel Mix.js不会将组件文件构建public > js到public. 其次，最好用组件的名称来命名文件。虽然第二个不是那么重要，但主要是处理第一个问题。

应用程序.js

import Vue from 'vue'
import router from "./router";
import App from './components/App.vue'

new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

路由器.js

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
    mode: 'history',
    routes: [
        {
            path: "/",
            component: () => import("./components/ProductList.vue")
        },
        {
            path: "/cart",
            component: () => import("./components/ShoppingList.vue")
        }
    ]
});

webpack.mix.js

const mix = require('laravel-mix');

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