Laravel项目部署OVH服务器后手机端Bootstrap加载异常求助

1. 修正@vite指令的使用方式 #

@vite指令仅用于处理resources目录下需要Vite编译的资源，你把public目录下的静态文件（比如dataTable.css、jquery.js等）也放入@vite数组是错误的——Vite不会处理public目录下的文件，这种混合写法会导致资源路径解析异常，手机端访问时路径指向错误。

修改app.blade.php头部代码：

{{-- 用@vite处理需要编译的resources资源 --}}
@vite(['resources/sass/app.scss', 'resources/js/app.js'])

{{-- 用asset助手加载public目录下的静态资源 --}}
<link rel="stylesheet" href="{{ asset('css/dataTable.css') }}">
<link rel="stylesheet" href="{{ asset('css/custom.css') }}">
<script src="{{ asset('js/jquery.js') }}"></script>
<script src="{{ asset('js/dataTable.js') }}"></script>
<script src="{{ asset('js/custom.js') }}"></script>

2. 配置Vite生成绝对路径资源 #

OVH服务器的环境可能导致Vite默认生成的相对路径在手机端访问时失效，需确保资源路径为绝对路径：

• 首先修改.env文件，设置正确的HTTPS域名：

APP_URL=https://your-domain.com

• 再修改Vite配置文件，指定base参数（Laravel Vite插件会自动读取APP_URL，手动配置可避免环境差异问题）：

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js'      
            ],
            refresh: true,
        }),
    ],
    base: process.env.APP_URL + '/',
});

3. 处理HTTPS混合内容问题 #

手机浏览器会严格拦截混合内容（HTTPS页面加载HTTP资源），需确保所有资源都通过HTTPS加载：

1. 重新编译Vite资源：npm run build
2. 清除Laravel缓存：php artisan cache:clear && php artisan config:clear

4. 强制全站HTTPS（可选） #

如果上述步骤仍无效，可在app/Providers/AppServiceProvider.php的boot方法中添加强制HTTPS逻辑：

use Illuminate\Support\Facades\URL;

public function boot()
{
    if (env('APP_ENV') === 'production') {
        URL::forceScheme('https');
    }
}

完成以上操作后重新部署项目，手机端即可正常加载Bootstrap样式。

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