Laravel生产环境站点异常：livewire.js与app.js返回404错误

将基于Filament Admin的仪表盘部署到生产环境后，本地运行完全正常，但生产环境无法登录，通过开发者工具检测到两个404错误：

1. some.domain.ovh/filament/assets/app.js?id=942414d090ce297f343ebeb13f12bc7
2. some.domain.ovh/livewire/livewire.js?id=de3fca26689cb5a39af4

发现文件路径不正确，本地执行npm run development编译无异常，以下是相关配置文件：

tailwind.config.js #

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
    './vendor/filament/**/*.blade.php',
  ],
  darkMode: 'class', // original false or 'media' or 'class'
  theme: {
    extend: {
        colors: {
            danger: colors.purple, // rose
            primary: colors.sky, //original blue
            success: colors.emerald, // green
            warning: colors.orange, //yellow
        },
        fontFamily: {
            sans: ['Nunito', ...defaultTheme.fontFamily.sans]
        }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
      require('@tailwindcss/forms'),
      require('@tailwindcss/typography'),
  ],
}

vite.config.js #

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament.css',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
});

postcss.config.js #

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

package.json #

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "development": "vite build"
    },
    "devDependencies": {
        "@alpinejs/focus": "^3.10.5",
        "@tailwindcss/forms": "^0.5.3",
        "@tailwindcss/typography": "^0.5.8",
        "autoprefixer": "^10.4.13",
        "alpinejs": "^3.0.6",
        "axios": "^0.25",
        "laravel-vite-plugin": "^0.7.3",
        "lodash": "^4.17.19",
        "postcss": "^8.2.4",
        "tailwindcss": "^3.2.4",
        "tippy.js": "^6.3.7",
        "vite": "^4.0.3"
    }
}

resources/js/bootstrap.js #

import _ from 'lodash';
window._ = _;

import axios from 'axios';
window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

resources/js/app.js #

import './bootstrap';

import Alpine from 'alpinejs';
import focus from '@alpinejs/focus';
window.Alpine = Alpine;

Alpine.plugin(focus);

Alpine.start();

1. 修正生产环境编译命令

   • 你的package.json中development脚本指向vite build，但生产环境建议明确区分开发与生产编译，添加生产脚本：

     "scripts": {
         "dev": "vite",
         "build": "vite build",
         "development": "vite build"
     }
     

   • 部署时必须执行npm run build，确保生成的静态资源输出到public/build目录，且为生产优化版本。

2. 配置正确的资源域名

   • 在.env文件中设置资源根域名，避免路径生成错误：

     ASSET_URL=https://some.domain.ovh
     FILAMENT_ASSET_URL=https://some.domain.ovh
     

   • 对应检查config/app.php和config/filament.php中的asset_url配置，确保读取环境变量。

3. 整合Livewire资源到Vite

   • 先发布Livewire静态资源：

     php artisan livewire:publish --assets
     

   • 修改vite.config.js，将Livewire的js文件加入编译入口：

     input: [
         'resources/css/app.css',
         'resources/js/app.js',
         'resources/css/filament.css',
         'vendor/livewire/livewire.js',
     ],
     

4. 清除所有缓存

   • 部署后执行以下命令清除Laravel缓存：

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

   • 强制刷新浏览器缓存（Ctrl+Shift+R），避免加载旧的资源路径。

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