Laravel9.19+Vue3.2+Vite项目报错，求排查解决方法

报错原因分析 #

• 重复调用@vite指令：app.blade.php在<head>和<body>内重复引入了相同资源，导致Vite重复注入资源，引发加载冲突或报错。
• SCSS与CSS资源冗余配置：vite.config.js同时将resources/css/app.css和resources/scss/app.scss设为入口，通常SCSS编译后会生成CSS文件，同时引入会造成资源冗余甚至样式冲突。
• 资源加载逻辑异常：即使Vue挂载节点已存在，重复加载JS资源仍会导致实例重复初始化等异常问题。

解决步骤 #

1. 移除重复的@vite指令 #

修改app.blade.php，仅在<head>中保留一次@vite调用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel VUE CRUD Application - LaravelTuts</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;600&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    @vite(['resources/scss/app.scss', 'resources/js/app.js'])
</head>
<body>
    <div id="app">
        <h1>Hello Sass</h1>
    </div>
</body>
</html>

注：如果app.css是app.scss的编译产物，无需单独引入，Vite会自动处理SCSS编译并注入对应CSS资源。

2. 优化Vite配置 #

调整vite.config.js，移除冗余的CSS入口：

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";

export default defineConfig({
    plugins: [
        laravel({
            input: [
                "resources/scss/app.scss",
                "resources/js/app.js",
            ],
            refresh: true,
        }),
    ],
});

3. 确保Vue实例正确挂载 #

检查resources/js/app.js中的Vue挂载代码，确保指向正确的DOM节点：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

4. 清理缓存并重启服务 #

• 清理Vite缓存并构建资源：

  npm run build
  

• 重启Laravel开发服务器和Vite开发服务：

  php artisan serve
  npm run dev
  

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