Laravel集成Vue报app.js/app.css 404 组件无法渲染问题

两个核心问题导致资源404、组件无法渲染：

• 你的Laravel 9项目默认使用Vite作为前端构建工具，Vite的开发资源托管、生产构建输出路径，和旧版Laravel Mix完全不同：开发模式下资源由Vite本地服务直接托管，不会输出到public/js、public/css目录；生产构建后资源默认存放在public/build目录，直接用asset()函数按Mix的路径规则找文件必然404。
• 你安装的laravel/ui v3版本默认生成的是适配Laravel Mix的资源引入代码，和当前项目的Vite配置不兼容。另外你之前写的{{asset ('js / app.js')}}路径里带多余空格，本身也是语法错误。

二选一即可，优先选官方推荐的Vite方案。

方案一：使用默认Vite构建（官方推荐） #

1. 修改welcome.blade.php的资源引入逻辑，删掉head标签里原有通过asset()引入js、css的两行代码，替换为Vite专用的引入指令：

   @vite(['resources/js/app.js', 'resources/sass/app.scss'])
   

2. 项目根目录新建或修改vite.config.js，添加Vue2适配配置：

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   import vue2 from '@vitejs/plugin-vue2';
   
   export default defineConfig({
       plugins: [
           laravel({
               input: ['resources/js/app.js', 'resources/sass/app.scss'],
               refresh: true,
           }),
           vue2()
       ]
   });
   

3. 安装缺失的Vue2 Vite适配依赖：

   npm install @vitejs/plugin-vue2 --save-dev
   

4. 启动前端资源编译服务，开发过程中保持该进程运行：

   npm run dev
   

5. 清理Example.vue组件里多余的enter code here占位文字，避免页面显示异常。

方案二：切回Laravel Mix（兼容旧版laravel/ui配置） #

如果不想调整现有blade里的asset引入逻辑，可以切换回Mix构建：

1. 移除Vite相关依赖：

   npm remove vite laravel-vite-plugin
   rm vite.config.js
   

2. 安装Mix依赖：

   npm install laravel-mix --save-dev
   

3. 项目根目录新建webpack.mix.js配置文件：

   const mix = require('laravel-mix');
   mix.js('resources/js/app.js', 'public/js')
      .sass('resources/sass/app.scss', 'public/css')
      .vue({ version: 2 });
   

4. 替换package.json里的scripts字段为Mix对应命令：

   "scripts": {
       "dev": "mix",
       "watch": "mix watch",
       "hot": "mix hot",
       "prod": "mix --production"
   }
   

5. 执行编译命令，生成的资源会直接输出到public/js、public/css目录，asset()函数可正常识别：

   npm run dev
   

• 本地配置Laravel站点时，web服务器的根目录必须指向项目的public文件夹，不能指向项目根目录，否则会出现路径多拼一层public导致的404问题。
• asset()辅助函数的路径参数不要加多余空格，路径要和public目录下的实际文件结构完全对应。

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