我安装了vue.js并在我的项目laravel中进行了vuetify。我配置Vue路由器以构建一个单页应用程序。除了加载http://localhost:8000/accueil之外，不显示组件我在控制台“清单：行：1，列：1，语法错误”中收到此错误]
import Vue from 'vue'
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
Vue.use(VueRouter);
let routes = [{
path: '/accueil',
component: require('./components/Accueil.vue')
},
{
path: '/home',
component: require('./components/Home.vue')
}
]
const router = new VueRouter({
routes // short for `routes: routes`
})
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app',
router // <-- register router with Vue
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="user" content="{{ Auth::user() }}">
<link rel="manifest" href="/manifest.json">
<title>SGAT Dashboard</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/blue/pace-theme-corner-indicator.min.css" rel="stylesheet">
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<!-- use router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- `<router-link>` will be rendered as an `<a>` tag by default -->
<router-link to="/accueil">Go to Foo</router-link>
<router-link to="/Home">Go to Bar</router-link>
<router-view></router-view>
</div>
</body>
</html><template>
<v-card
class="mx-auto"
max-width="344"
>
<v-card-text>
<div>Word of the Day</div>
<p class="display-1 text--primary">
be•nev•o•lent
</p>
<p>adjective</p>
<div class="text--primary">
well meaning and kindly.<br>
"a benevolent smile"
</div>
</v-card-text>
<v-card-actions>
<v-btn
text
color="deep-purple accent-4"
>
Learn More
</v-btn>
</v-card-actions>
</v-card>
</template>
<script>
export default {
}
</script><< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9WVVJBei5wbmcifQ==” alt =“在此处输入图像描述”>
您似乎在这里使用require：
import Vue from 'vue'
require('./bootstrap');
window.Vue = require('vue');
您应该使用import
import Vue from 'vue'
import './bootstrap';
window.Vue = Vue;