Vue+Laravel项目中asset/mix资源加载失败求助

1. 修正.env配置并清除缓存 #

确保.env文件中的APP_URL设置为你的完整域名（包含https）：

APP_URL=https://example.net

执行以下命令清除Laravel配置和视图缓存：

php artisan config:cache
php artisan view:cache

2. 调整Laravel Mix配置 #

编辑项目根目录的webpack.mix.js，明确设置public路径和资源根目录，确保打包后的资源路径正确：

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .setPublicPath('public')
   .setResourceRoot('/');

重新执行打包命令：

npm run production

3. 根目录添加.htaccess转发请求到public #

由于你的Apache SSL配置指向项目根目录，而Laravel的入口在public目录，在项目根目录（/var/www/html/vue-laravel）新建.htaccess文件，内容如下：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^(.*)$ public/$1 [L]
</IfModule>

这个配置会把所有请求转发到public目录，既不用修改SSL配置，又能让Laravel正确处理路由和资源路径。

4. 确认Blade模板使用正确的资源辅助函数 #

确保模板中加载CSS/JS时使用Laravel的mix()或asset()辅助函数，而不是硬编码相对路径：

{{-- 正确用法 --}}
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}"></script>

mix()函数会自动根据APP_URL生成正确的资源路径，同时处理版本缓存问题。

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