Laravel集成Vue3后npm run production的.env环境配置方案

核心排查与修复步骤 #

1. 修正环境文件加载逻辑 #

Laravel Mix不兼容Vue CLI的env.production文件逻辑，生产构建时默认读取根目录.env文件。你可以：

• 直接在根目录.env中配置生产环境的MIX_API_URL
• 或者创建.env.production文件，修改package.json的构建命令来指定加载：

  "scripts": {
    "production": "cross-env NODE_ENV=production mix --production --env=production"
  }
  

  Windows环境需先安装cross-env：

  npm install cross-env --save-dev
  

2. 强制清除缓存 #

Laravel和Mix的缓存会导致环境变量不更新，构建前执行：

• 清除Laravel配置缓存：

  php artisan config:clear
  php artisan cache:clear
  

• 清除Mix缓存：

  npm run clear
  # 或手动删除node_modules/.cache目录
  

3. 确认Vue变量调用正确性 #

• 检查组件中是否正确调用process.env.MIX_API_URL，注意拼写（大小写、下划线），生产构建后该变量会被静态替换，可直接查看public/js/app.js文件里是否存在正确的API地址
• 若使用Vue3的<script setup>语法，无需通过this调用，直接写process.env.MIX_API_URL即可

4. 检查webpack.mix.js配置 #

确保基础配置正确，Laravel Mix默认已集成环境变量处理，示例配置：

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

mix.js('resources/js/app.js', 'public/js')
   .vue()
   .version(); // 生产环境建议开启版本号

5. 避免.env文件引号问题 #

配置变量时不要加引号，否则会导致变量包含多余字符：

# 正确写法
MIX_API_URL=http://localhost:8080/api/
# 错误写法
MIX_API_URL="http://localhost:8080/api/"

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