Laravel项目Vite配置中APP_URL未定义及资源路径替换求助

一、解决APP_URL未定义问题 #

Node.js环境不会自动读取Laravel根目录的.env文件，这是直接调用process.env.APP_URL拿不到值的核心原因，按以下步骤修复：

1. 安装dotenv依赖
   执行命令安装读取.env文件的工具：

   npm install dotenv --save-dev
   

2. 修改vite.config.js加载.env
   在配置文件顶部添加dotenv加载逻辑，注意调整.env文件的路径（确保指向Laravel根目录的.env）：

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   import path from 'path';
   import dotenv from 'dotenv';
   import { fileURLToPath } from 'url';
   
   // 获取当前文件的绝对路径，用于定位.env
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = path.dirname(__filename);
   // 根据项目结构调整路径，示例假设vite.config.js在packages/mart/theme下，../../指向根目录
   dotenv.config({ path: path.resolve(__dirname, '../../.env') });
   
   const APP_URL = process.env.APP_URL || 'http://mart.test';
   
   export default defineConfig({
       // 你的原有配置...
   });
   

3. 客户端JS访问APP_URL的注意事项
   如果需要在前端JS里调用APP_URL，Vite默认只暴露以VITE_开头的环境变量。你可以：

   • 把.env里的配置改成VITE_APP_URL=http://mart.test
   • 在vite.config.js里读取process.env.VITE_APP_URL
   • 前端JS里通过import.meta.env.VITE_APP_URL访问

二、资源路径替换配置 #

1. 配置Vite路径别名（简化资源引用） #

在resolve.alias里添加自定义别名，比如把@指向resources目录，这样在JS/SCSS里可以用短路径引用资源：

resolve: {
    alias: {
        '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        '@': path.resolve(__dirname, './src/resources'), // 新增别名
    }
},

之后在app.js或app.scss里就能这样写：

// 代替冗长的相对路径
import '@/js/components/sidebar.js';

2. 修正publicDirectory路径 #

你的publicDirectory: "../../../public/hot"要确保路径是相对于vite.config.js所在目录的正确路径，比如如果配置文件在packages/mart/theme/下，../../../public正好指向Laravel根目录的public文件夹，需根据实际项目结构核对，避免路径错误导致资源无法生成。

3. Laravel模板里的资源引用 #

在blade模板中使用Laravel官方的@vite指令加载资源，Vite会自动处理开发/生产环境的路径：

@vite(['src/resources/sass/app.scss', 'src/resources/js/app.js'])

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