执行npm run prod后Laravel Mix资源仍加载localhost:8080如何解决

问题 #

我想知道如何在布局文件中使用.env文件内的APP_URL配置，我当前的代码如下：

<!-- Styles -->
<link rel="stylesheet" href="{{ asset(mix('css/styles.css')) }}">
<!-- Javascript -->
<script src="{{mix('js/app.js')}}"></script>

webpack.mix.js配置如下：

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

// Styles
mix.sass('resources/scss/styles.scss', 'public/css')
.options({
    postCss: [ tailwindcss('./tailwind.config.js') ],
});

// Javascript [Dashboard]
mix.js('resources/js/app.js', 'public/js/app.js')
.vue();

但当我执行npm run prod打包并推送到服务器后，页面加载资源时始终报如下错误：

GET https://localhost:8080/css/styles.css net::ERR_CONNECTION_REFUSED2023:19 
GET https://localhost:8080/js/app.js net::ERR_CONNECTION_REFUSED

我已在.env文件中配置：

APP_URL=myurl.com

但站点依旧尝试从localhost:8080加载资源，我使用的laravel-mix版本为6.0.27，请问该问题如何解决？

解决方案 #

• 第一步：修正.env配置，给APP_URL补全协议前缀，同时新增ASSET_URL配置，和APP_URL保持一致：

APP_URL=https://myurl.com
ASSET_URL=https://myurl.com

Laravel Mix 6.x会优先读取ASSET_URL作为资源根路径，且域名必须带http/https协议头，否则路径生成会出错。

• 第二步：修改webpack.mix.js，新增资源根路径配置：
  在配置文件所有mix规则前添加如下代码：

mix.setResourceRoot(process.env.ASSET_URL || '/');

该配置会告诉Mix打包时将指定的根路径写入mix-manifest.json，替代默认的本地开发地址。

• 第三步：重新执行生产打包命令
  如果是在服务器上直接打包，直接执行npm run prod即可，Laravel默认会自动加载.env文件中的配置变量。
  如果是本地打包后再上传到服务器，打包前需要确保本地.env中的ASSET_URL已配置为服务器的正式域名，再执行打包命令。
• 第四步：验证打包结果
  打包完成后打开public/mix-manifest.json文件，检查里面的资源路径是否已经替换为你配置的正式域名，而非localhost:8080。确认无误后部署到服务器即可解决资源加载错误的问题。

补充说明：配置生效后，布局文件中的资源引用可以简化为直接调用mix()函数，无需嵌套asset()，避免出现路径重复拼接的问题：

<link rel="stylesheet" href="{{ mix('css/styles.css') }}">
<script src="{{ mix('js/app.js') }}"></script>

内容的提问来源于stack exchange，提问作者Jérémie Chazelle