如何构建Vue+Laravel生产版本？解决构建后资源未关联问题

1. 核对环境变量配置 #

• 确保.env文件中APP_URL设置为生产环境的实际域名（如APP_URL=https://your-production-domain.com），Vite会基于此生成正确的资源路径。
• 确认APP_ENV=production，避免应用仍使用开发环境的资源引用逻辑。

2. 修正Vite指令用法 #

不要单独引用JS文件，应通过@vite指令加载所有配置好的资源入口：

@vite(['resources/css/app.css', 'resources/js/app.js'])
<div id="app"></div>

或者更简洁的写法（Laravel Vite插件会自动读取配置文件中的入口列表）：

@vite
<div id="app"></div>

注意：禁止手动编写静态资源路径，必须依赖@vite指令自动生成带哈希后缀的生产资源路径。

3. 清除Laravel缓存 #

构建完成后执行以下命令清除缓存，确保应用读取最新的资源配置：

php artisan view:clear
php artisan config:clear
php artisan cache:clear

生产环境下，配置确认无误后可重新缓存配置：

php artisan config:cache

4. 验证构建产物 #

检查public/build目录下是否存在带哈希后缀的构建文件（如app.xyz123.css、app.abc456.js），若目录为空则重新执行npm run build确保构建成功。

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