在安装了新安装的Laravel后，我安装了VueRouter，并实现了以下简单代码后，我无法使用VueJs，并且在终端中没有任何错误：
命令没有显示任何错误，我从Laravel混合中获得build successful/resources/js/app.js内容：
GITHUB项目链接：
import Vue from "vue";
import VueRouter from 'vue-router';
import ExampleComponent from "./components/ExampleComponent";
require('./bootstrap');
const routes = new VueRouter(
{
mode:'history',
routes:[
{
path:'/',
component:ExampleComponent
}
]
}
);
const app = new Vue({
el: '#app',
routes
});
/resources/js/bootstrap.js内容：
window._ = require('lodash');
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
app.blade.php内容：
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
@yield('content')
</div>
</body>
</html>
welcome.blade.php内容：
@extends('layouts.app')
@section('content')
<div class="container">
<router-view></router-view>
</div>
@endsection
laravelweb.php内容：
Route::get('/{any}', function () {
return view('welcome');
})->where('any','.*');
一个简单的laravelcomposer.json:
"require": {
"php": "^7.3|^8.0",
"fideloper/proxy": "^4.4",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^7.0.1",
"laravel/framework": "^8.12",
"laravel/tinker": "^2.5",
"laravel/ui": "^3.2"
},
webpack.mix.js内容：
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css');
然后：
php artisan serve && npm run watch
在浏览器http://127.0.0.1:8000中导航到/后，我有空页面
如何解决使用vuejs的问题？
关于Vue路由器，我通常有一个单独的router.js文件，因为它可能很长：
import Vue from 'vue'
import Router from 'vue-router'
...
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{
path: '/users',
name: 'users',
component: () => import('./views/users/_users.vue'),
}
...
]
export default router
在main.js中，我有：
import router from './router' // path to router.js file
...
Vue.router = router
...
export default new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')
这些约束看起来是多余的：->where('any','.*')。
并且该路由可能不匹配，或者.htaccess可能不存在
例如。为any方法将正则表达式(.*)捕获到变量$page中：
Route::any('(.*)', function($page) {
// dd($page);
return view('welcome');
});
不确定，但您可能还需要Vue.use(VueRouter)；文档的初始化也不同：
const app = new Vue({routes}).$mount('#app')
我的意思是，没有调试信息，甚至有两种方法可以安装VueRouter。