Laravel集成Vue.js时Router失效，<router-view>无法激活求助

Hey there, let's tackle this frustrating issue where your Vue.js setup works perfectly in a backup directory but breaks in your main project. The fact that the backup runs smoothly tells us your core code is solid—so we can focus on fixing the environment or setup discrepancies between the two folders. Here are the most likely fixes to try, in order of priority:

1. Check Your app.js Initialization (Critical Missing Piece!) #

You didn’t share your resources/js/app.js code, but this is where Vue and Vue Router get wired up. Without proper initialization, <router-view> will never render anything. Make sure your app.js looks something like this:

require('./bootstrap');

import Vue from 'vue';
import VueRouter from 'vue-router';
import { routes } from './route'; // Adjust the path if your route.js lives elsewhere

Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history', // Use 'hash' if you prefer hash-based routing
    routes: routes
});

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

If your main project’s app.js is missing this setup, that’s almost certainly why Vue isn’t activating.

2. Reinstall Dependencies #

Corrupted node_modules or missing packages (like vue-router) could be the issue. Since your backup works, your package.json is valid—let’s reset dependencies in the main project:

• Delete the node_modules folder and package-lock.json (or yarn.lock)
• Run npm install (or yarn install) to reinstall all packages
• Double-check that vue and vue-router are listed in your package.json dependencies

3. Recompile Assets with Laravel Mix #

Stale compiled assets can prevent Vue from being bundled correctly. Run these commands in your main project:

npm run dev # For development builds
# Or npm run production for optimized production builds

Watch for any compilation errors in the terminal—fix those first if they pop up, as they’ll block Vue from loading.

4. Clear Laravel Caches #

Laravel’s caching can cause unexpected behavior if you’ve tweaked routes or configs:

php artisan cache:clear
php artisan route:clear
php artisan config:clear

5. Inspect Browser Console for Errors #

Open Chrome DevTools (F12) and check the Console/Network tabs:

• 404 errors: Is app.js loading correctly? Verify the asset URL in the Network tab matches your project’s structure.
• JS errors: Look for missing dependencies or syntax issues that would break Vue’s initialization.

6. Quick Check of Your Blade Template #

Your kash.blade.php looks mostly good, but a couple of small things to confirm:

• The <script src="{{asset('js/app.js')}}"></script> is placed before other scripts (your current order is fine, but worth double-checking)
• The #app div wraps all Vue-dependent content (your structure here is correct)

Your Provided Code for Reference #

kash.blade.php

<head>
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css')}}">
<link href="{{asset('backend/vendor/fontawesome-free/css/all.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('backend/vendor/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet" type="text/css">
</head>
<body id="page-top">
<div id="app">
<div id="wrapper">
<div class="container-fluid" id="container-wrapper">
<router-view></router-view>
</div>
</div>
</div>
<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('backend/vendor/jquery/jquery.min.js')}}"></script>
<script src="{{asset('backend/vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('backend/vendor/jquery-easing/jquery.easing.min.js')}}"></script>
</body>
</html>

route.js

let login = require('./components/auth/login.vue').default;
export const routes = [
{ path: '/', component: login, name:'/' },
]

Login.vue

<template>
<div>
<div class="container-login">
<h1 class="h4 text-gray-900 mb-4">Login</h1>
</div>
<form class="user" @submit.prevent="login">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter Email Address" v-model="form.email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword" placeholder="Password" v-model="form.password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Login</button>
</div>
<hr>
</form>
<hr>
<div class="text-center">
</div>
</div>
</template>
<script type="text/javascript">
export default {
data(){
return {
form:{
email: null,
password: null
}
}
},
methods:{
}
}
</script>

Start with verifying your app.js setup first—it’s the most likely culprit given the backup works. If that checks out, move on to reinstalling dependencies and recompiling assets.

内容的提问来源于stack exchange，提问作者schon