Quasar框架下如何在package.json声明变量并用于Vue路由

为什么cross-env设置的变量没生效？ #

Quasar的构建工具（Webpack/Vite）会对客户端代码进行打包处理，直接通过cross-env设置的process.env变量无法直接在客户端代码中访问，必须通过Quasar的配置文件将变量注入到客户端环境中。

解决方案 #

方案一：使用Quasar原生--env参数（推荐） #

1. 修改package.json的脚本命令，直接用Quasar的--env参数传递变量：

// package.json
"scripts": {
  "electron:build:HI": "quasar dev -m electron -d --env example=HI",
  "electron:build:HELLO": "quasar dev -m electron -d --env example=HELLO"
}

2. 在quasar.config.js中配置，将变量注入到客户端环境：

// quasar.config.js
module.exports = function (ctx) {
  return {
    // ...其他配置
    build: {
      env: {
        EXAMPLE: ctx.dev ? ctx.env.example : process.env.example || ''
      }
    }
  }
}

3. 修改routes.js中的路由配置，注意变量引用和组件导入的正确性：

// routes.js
const example = process.env.EXAMPLE;
const routes = [
  {
    path: 'document-before-billA',
    component: example === 'HI' 
      ? () => import(`@/pages/documentDownload/DocumentBeforeBillHI.vue`) 
      : () => import('@/pages/NotFound.vue') // 空状态替换为实际组件
  },
  {
    path: 'document-before-billB',
    component: example === 'HELLO' 
      ? () => import(`@/pages/documentDownload/DocumentBeforeBillHELLO.vue`) 
      : () => import('@/pages/NotFound.vue') // 空状态替换为实际组件
  }
];

方案二：在路由入口文件中动态生成路由 #

如果需要更灵活的路由控制，可以在路由入口文件中根据环境变量动态生成路由规则：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
const example = process.env.EXAMPLE;

// 基础公共路由
let routes = [
  // 公共路由配置
];

// 根据环境变量添加动态路由
if (example === 'HI') {
  routes.push({
    path: '/document-before-billA',
    component: () => import(`@/pages/documentDownload/DocumentBeforeBillHI.vue`)
  });
} else if (example === 'HELLO') {
  routes.push({
    path: '/document-before-billB',
    component: () => import(`@/pages/documentDownload/DocumentBeforeBillHELLO.vue`)
  });
}

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

方案三：保留cross-env并注入变量 #

如果坚持使用cross-env，需要确保变量被Quasar注入到客户端：

1. 保持package.json的cross-env配置：

// package.json
"scripts": {
  "electron:build:HI": "cross-env EXAMPLE=HI quasar dev -m electron -d",
  "electron:build:HELLO": "cross-env EXAMPLE=HELLO quasar dev -m electron -d"
}

2. 在quasar.config.js中读取并注入变量：

// quasar.config.js
module.exports = function () {
  return {
    // ...其他配置
    build: {
      env: {
        EXAMPLE: process.env.EXAMPLE
      }
    }
  }
}

3. 后续路由配置同方案一。

注意事项 #

• 动态导入组件时，模板字符串需要保留固定前缀（比如@/pages/documentDownload/DocumentBeforeBill），确保构建工具能正确识别并打包相关组件。
• 组件导入不能返回空字符串，必须返回一个有效的组件Promise，建议配置兜底组件（如404页面）。

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