部署在子目录的Laravel+Inertia+Vue应用Vite组件CSS加载失败求助

1. 配置Vite的base路径 #

在vite.config.js中添加base配置，指定你的子目录路径（比如示例中的subdirectory），让Vite生成的资源路径自动带上子目录前缀：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
   // 新增base配置，对应你的子目录名称
   base: '/subdirectory/',
   plugins: [
       laravel({
           input : [
               'resources/js/app.js',
               'resources/sass/website/theme.scss',
               'resources/js/website/main.js',
           ],
           refresh: [{
               paths: ['resources/js/**', 'resources/sass/**'],
               config: { delay: 300 }
           }],
       }),    
       
       vue({
           template: {
               transformAssetUrls: {
                   base: null,
                   includeAbsolute: false,
               },
           },
       }),
   ],
   resolve: {
       alias: {
           'ziggy': path.resolve('vendor/tightenco/ziggy/dist'),
           'ziggy-vue' : path.resolve('vendor/tightenco/ziggy/src/js/vue'),            
       }
   }
});

2. 配置Laravel环境变量 #

在项目根目录的.env文件中，设置正确的应用URL和资源URL，确保Laravel生成的资源链接也包含子目录：

APP_URL=http://example.com/subdirectory
ASSET_URL=http://example.com/subdirectory

3. 重新构建前端资源 #

执行生产环境构建命令，让Vite根据新配置生成带正确路径的资源文件：

npm run build

4. 确认Inertia路由分组（可选） #

如果使用Inertia管理页面路由，确保Laravel路由文件中已将相关路由分组到子目录下：

Route::prefix('subdirectory')->group(function () {
    Route::inertia('/login', 'Login')->name('login');
    // 其他页面路由...
});

原理说明 #

部署到子目录后，Vite默认会以根路径生成资源URL，添加base配置后，Vite会自动在所有资源（包括组件内的CSS）路径前拼接子目录前缀；同时Laravel的ASSET_URL确保框架层面生成的资源链接也符合子目录结构，两者配合即可解决资源路径缺失子目录的问题。

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