Quasar/Vite中extendViteConf动态别名配置因环境变量失效

你遇到的核心问题是：Quasar v2 + Vite环境下，quasar.config.js的extendViteConf钩子中无法通过process.env读取.env文件中的变量，但客户端组件能正常通过import.meta.env获取。以下是针对你疑问的解答及原生解决方案：

1. build.env或.env的配置错误？ #

你的.env文件存在格式错误：dotenv（Vite处理环境变量的底层依赖）不支持//注释，只能用#开头的注释。同时，Quasar CLI默认不会将.env中的变量自动注入到Node.js的process.env中——build.env的作用是将变量注入到客户端的import.meta.env，而非供Node环境的配置代码使用。你在build.env中写VITE_ASSET_ROOT: process.env.VITE_ASSET_ROOT || 'default'时，因为process.env中无该变量，所以实际注入到客户端的是'default'，但客户端能正确获取.env值是因为Vite单独读取了.env文件并注入，和build.env的配置无关。

2. build.env变量是否应在extendViteConf中可用，还是流程限制？ #

build.env的变量仅面向客户端代码，不会在Node环境的extendViteConf中可用，这是Quasar/Vite初始化流程的限制：

• quasar.config.js是在Node环境中执行的配置文件，执行时机早于Vite加载环境变量并注入客户端的流程。
• Quasar CLI默认不会将.env变量暴露到Node的process.env中，仅让Vite处理客户端的环境变量注入。

3. 无需手动加载.env的原生方案？ #

可以使用Vite内置的loadEnv函数（无需额外安装依赖），在quasar.config.js中加载.env文件并获取变量，用于配置动态别名。具体代码如下：

// quasar.config.js
const { loadEnv } = require('vite');
const path = require('path');

module.exports = function (ctx) {
  // 加载对应环境的.env文件，仅获取VITE_前缀的变量
  const env = loadEnv(ctx.mode, process.cwd(), 'VITE_');
  
  return {
    build: {
      env: {
        VITE_ASSET_ROOT: env.VITE_ASSET_ROOT || 'default',
      },
      extendViteConf(viteConf) {
        // 用Vite加载到的env变量配置别名
        viteConf.resolve.alias['assets'] = path.resolve(
          __dirname, 
          `src/assets/${env.VITE_ASSET_ROOT || 'default'}`
        );
      },
    },
  };
};

说明： #

• ctx.mode由Quasar CLI自动传入，对应development或production，会自动加载.env.development或.env.production等环境特定文件。
• loadEnv是Vite原生API，会自动处理.env文件的格式（包括#注释），无需手动引入dotenv。
• 这样配置后，本地开发时.env文件中的VITE_ASSET_ROOT会被正确加载到Node环境，动态别名即可生效，同时客户端也能通过import.meta.env.VITE_ASSET_ROOT获取该变量。

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