Question

我是 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}
});

Answer 1

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

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

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

OR （这是更好的方式）

您应该将其添加到resources/assets/js/plugins/bootstrap-fileinput/bootstrap-fileinput.js

中的供应商目录中

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

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

资产与VueJs - Laravel 5.5

1 个答案: