Question

请我尝试制作我的第一个vuejs - laravel应用程序，我遇到布局和资产问题，这是我的代码：

在这里，我尝试从路线中检测布局，它使用起来非常好，因为当我刷新页面时，它首先变为主要布局并且在需要布局之后

app.vue

<template>
    <div>
        <div v-if="$route.meta.layout == 'front'">
            <frontLayout></frontLayout>
        </div>
        <div v-else-if="$route.meta.layout == 'admin'">
            <adminLayout></adminLayout>
        </div>
        <div v-else>
            <mainLayout></mainLayout>
        </div>
    </div>
</template>
<script>
    let frontLayout = require('./layouts/frontLayout.vue');
    let mainLayout = require('./layouts/mainLayout.vue');

    import {mapState} from 'vuex'

    export default {
        components:{frontLayout,mainLayout},
        computed: {
            ...mapState({
                userStore: state => state.userStore
            })
        },
        created(){
            console.log('app vue')
        }
    }
</script>

对于设置webpack laravel-mix后的资产，如下所示：

webpack.mix.js

mix.combine(['resources/assets/front/css/*','resources/assets/front/plugin-css/*','resources/assets/front/style.css'], 'public/css/front.css')
    .options({
      processCssUrls: false,
    });
mix.combine(['resources/assets/front/script/*','resources/assets/front/plugin-script/*'], 'public/js/front.js')
    .options({
      processCssUrls: false,
    });

我尝试在frontLayout.vue中导入front.css文件时加载如下：

frontLayout.vue

<template></template>
<script>

    export default {

    }
</script>

<style scoped>
    @import '../../../../public/css/front.css';
</style>

但它永远不会工作！请帮忙。谢谢

vuejs laravel布局 - 资产

0 个答案: