Javascript 如何为不同的Vue布局使用不同的资源？

我已经阅读了本书的相关章节完整堆栈Vue.js 2和Laravel 5，并浏览了一些问题（例如）来解决这个问题。但是他们都没有帮助我

我创建了一个Laravel+Vue水疗中心，效果非常好。但是，当我想用不同的JavaScript和CSS资源为这个SPA创建一个管理员仪表板（因为仪表板应该有完全不同的样式）时，我太糊涂了。我不知道也不明白我应该遵循什么样的算法来实现这一点

您可以在下面看到软件的总体视图

// app.js

require('./bootstrap');

import Vue from 'vue'
import App from './views/App'
import router from './router'
import store from './store'

// Layouts
import Default from './views/layouts/Default.vue'
import Dashboard from './views/layouts/Dashboard.vue'

Vue.component('default-layout', Default);
Vue.component('dashboard-layout', Dashboard);

Vue.config.productionTip = false

export default window.vue = new Vue({
    el: 'app',
    components: {
        App
    },
    router,
    store
});

---

如何在仪表板布局中使用一个完全不同的样式文件和一个额外的JavaScript文件？

如果要为这两个文件寻找单独的

Vue

实例，则可以遵循以下步骤

为两个实例分别创建

blade

模板。为两个模板添加单独的路由

Route::get('/dashboard/{any?}', function () {
    return view('dashboard');
})->where('any', '[\/\w\.-]*');

Route::get('/{any?}', function () {
    return view('index');
})->where('any', '[\/\w\.-]*');

在单独的

js

文件中创建两个

Vue

实例，比如

app.js

和

dashboard.js

。您可以在另一个目录中创建它，如

dashboard/dashboard.js

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

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

更新你的

webpack.mix.js

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

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

---

您可以将构建文件公开链接到相应的刀片模板。

在这种情况下，是否应该有两个不同的route.js文件？是的，如果需要，您可以创建两个

route

文件和

store

。最后，这种方法是否有您可以预测的缺点（特别是在用户身份验证方面）？我在我的应用程序中使用了正常的Laravel身份验证，并且工作正常。

Route::get('/dashboard/{any?}', function () {
    return view('dashboard');
})->where('any', '[\/\w\.-]*');

Route::get('/{any?}', function () {
    return view('index');
})->where('any', '[\/\w\.-]*');

Route::get('/dashboard/{any?}', function () {
    return view('dashboard');
})->where('any', '[\/\w\.-]*');

Route::get('/{any?}', function () {
    return view('index');
})->where('any', '[\/\w\.-]*');

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

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