带有 VueJs 的资产 - Laravel 5.5答案

【问题标题】：Asset with VueJs - Laravel 5.5带有 VueJs 的资产 - Laravel 5.5
【发布时间】：2018-04-03 23:13:42
【问题描述】：

我是 VueJs 的新手，我尝试制作一个新的应用程序，将前端中的 VueJs 与 Laravel 5.5 服务器端 结合起来，然后我定义项目结构时遇到同样的问题，以及如何从 .vue 文件访问资产：

代码组件：

<template>
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">Dashboard</h3>
        </div>
        <div class="col-md-7 align-self-center">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
            </ol>
        </div>
    </div>
</template>
    <script src="{{ asset('assets/plugins/bootstrap-fileinput/bootstrap-fileinput.js') }}" type="text/javascript"></script>

App.js

import Vue from 'vue'

import VueRouter from 'vue-router'
Vue.use(VueRouter)

import axios from 'axios';
import VueAxios from 'vue-axios';


axios.interceptors.request.use(function(config){
    config.headers['X-CSRF-TOKEN'] = window.Laravel.csrfToken
    return config
})

Vue.prototype.$http  = axios

Vue.use(VueAxios, axios);

let Mytoolbar = require('./components/Toolbar.vue');
let Mysidebar = require('./components/Sidebar.vue');
let Myfooter = require('./components/Footer.vue');
let Home = require('./components/Home.vue');


const routes = [
  { path: '/home', component: Home }
]


const router = new VueRouter({ mode: 'history', routes: routes })

const app = new Vue({
    el: '#app',
    router,
    components: {Mytoolbar,Mysidebar,Myfooter}
});

【问题讨论】：

你试过看 laravel mix 吗？ laravel.com/docs/5.5/mix
是的，我认为 laravel mix 是将脚本或样式文件组合在一起，但我需要的是每个组件都有自己的 scipt 和样式：我认为最好只使用需要的脚本和样式 foreach你知道的页面
我很确定这不是首选的方式。通常，您将所有 JS 文件和依赖项连接到 1 个或 2 个 JS 文件中，并且只加载这些文件。如果您确实需要将某些 JS 请求范围限定为某些组件，您可以在模板中的 created() 方法上加载文件。

标签： javascript php laravel vue.js laravel-5.5

【解决方案1】：

您有 2 个选择。这个脚本：

<script src="{{ asset('assets/plugins/bootstrap-fileinput/bootstrap-fileinput.js') }}" type="text/javascript"></script>

应该进入底部脚本部分的app.blade.php。

或（这是更好的方法）

您应该将其添加到resources/assets/js/plugins/bootstrap-fileinput/bootstrap-fileinput.js 的供应商目录中

然后像这样在你的app.js 中要求它：

require('./plugins/bootstrap-fileinput/bootstrap-fileinput.js')

【讨论】：