这发生在我身上,在花了相当多的时间和精力之后,我确实设法弄清楚发生了什么以及如何解决它。
发生的情况如下:
- 你更新你的
webpack.mix.js
文件与您希望分别发布已编译的 JS 和 CSS 文件的目标。
mix.js('resources/js/app.js', 'public/js').vue();
- 当您运行时,Mix 会编译生成的 CSS 和 JS 文件并将其存储在各自的目标文件夹中
npm run dev
or npm run watch
.
laravel-app (Your laravel app root folder)
\public
\css
\app.css
\js
\app.js
- 当您在浏览器中使用 Valet 打开应用程序时,Laravel 会输出以下错误消息:
Unable to locate Mix file: /js/app.js
(or)
Unable to locate Mix file: /css/app.css
不过,在“未捕获的异常”屏幕上值得注意的是,Laravel 默认情况下会尝试在以下位置查找文件:localhost:8080
。暗示 Laravel 正在分别在以下位置查找文件:
localhost:8080\css\app.css
(and)
localhost:8080\js\app.js
因此,如果您的主机名或端口不是localhost:8080
,Laravel 将无法找到您的文件。例如,如果您使用 Valet,您的默认 URL 将变为laravel-app.test
其中 laravel-app 是应用程序根文件夹的名称。
但是,有一种方法可以解决这个问题。它直接出来Laravel 的文档 https://laravel.com/docs/8.x/mix#custom-mix-base-urls.
解决方案(TL;DR)
为了使用自定义混合基 URL,您需要更新您的config\app.php
文件添加以下配置值以设置混合 URL:
'mix_url' => env('MIX_ASSET_URL', 'localhost'),
和你的mix_url
配置选项设置在你的app.php
文件,您现在应该能够通过添加来操作它MIX_ASSET_URL
键入你的.env
文件并将其设置为空白,以便它指向\public\js\app.js
和 \public\css\app.css 分别位于项目目录中。
MIX_ASSET_URL=""
这为我解决了这个问题。希望它也适合你。让我知道事情进展如何。干杯!