Laravel Mix下基础URL含子目录时如何正确引用Vue.js的app.js文件

你的Laravel应用部署在子目录/my-project/public下，Laravel Mix默认生成的资源路径是站点根目录的绝对路径，没有带上子目录前缀，所以请求路径错误触发404。

• 调整webpack.mix.js配置
  注意执行npm命令的工作目录需要是Laravel项目根目录（即my-project文件夹），将原有配置替换为以下内容：

  const mix = require('laravel-mix');
  
  // 定义公共输出目录为Laravel自带的public文件夹
  mix.setPublicPath('public')
  // 配置资源根路径前缀，匹配你的子目录部署路径
  mix.setResourceRoot('/my-project/public/')
  
  mix.js('resources/assets/js/app.js', 'js')
     .sass('resources/assets/sass/app.scss', 'css');
  

  你之前的配置错误点在于给入口文件路径加了my-project/前缀，在项目根目录下执行npm命令时，该前缀会导致无法找到对应资源文件。

• 配置Laravel资源路径前缀
  在项目根目录的.env文件中新增以下配置：

  ASSET_URL=https://www.mywebsite.com/my-project/public
  

  你也可以直接修改config/app.php文件中的asset_url参数：

  'asset_url' => env('ASSET_URL', 'https://www.mywebsite.com/my-project/public'),
  

  该配置会让mix()、asset()等Laravel辅助函数生成的资源路径自动带上子目录前缀，和你部署的路径匹配。

• 重新编译前端资源
  执行以下命令重新编译资源：

  npm run dev
  

  编译完成后刷新页面即可，此时{{mix('js/app.js')}}生成的路径会自动变为/my-project/public/js/app.js，不会再出现404报错。

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