javascript - Laravel webmix JS 与 Vue 组件顺序编译问题

Question

我在按顺序编译 js 时面临问题。 我想先编译库或自定义 js，但问题是 laravel webmix 首先编译 Vue 组件而不是自定义 js。

因此，当我运行命令npm run dev时，它会将所有js合并为public/js/app.js中的单个js

但它会先添加所有 vue 组件，然后添加 custom.js 代码。所以我想先编译custom.js代码，然后再编译vue组件代码。

app.js

require('./bootstrap');
require('./custom');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('product-list', require('./components/ProductListComponent.vue').default);
Vue.component('cart', require('./components/CartComponent.vue').default);

webpack.mix.js

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

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

Answer 1

app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('product-list', require('./components/ProductListComponent.vue').default);
Vue.component('cart', require('./components/CartComponent.vue').default);

自定义.js

require('./custom');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('product-list', require('./components/ProductListComponent.vue').default);
Vue.component('cart', require('./components/CartComponent.vue').default);

webpack.mix.js

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

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