vite.config.js文件配置代理设置VITE_APP_BASE_API

文章讲述了如何在Vite项目中使用`.env`文件管理开发和生产环境的环境变量,并配置API代理,以便在不同环境下提供不同的基础URL。同时介绍了Vue3Vite的热模块替换(HMR)配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

.env.development文件

ENV = 'development'
# base api
VITE_APP_BASE_API = '/dev-api'

.env.production文件

ENV = 'production'
# base api
VITE_APP_BASE_API = '/api'
 define: {
    'process.env': {
      VITE_APP_BASE_API: 'https://xxx.com'
    }
  },
  server: {
    hmr: true, // vue3 vite配置热更新不用手动刷新
    host: '0.0.0.0',
    port: 3000, // 端口
    open: false, // 启动项目后打开浏览器
    hot: true,
    overlay: {
      warning: false,
      error: true
    },
    proxy: {
      [env.VITE_APP_BASE_API]: {
        target: 'https://xxx.com',
        ws: true,
        changeOrigin: true,
        secure: false,
        rewrite: path => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), '')
      }
    }
  }
}

完整: 

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite' // 自动导入
import Components from 'unplugin-vue-components/vite' // 组件注册
import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import vueI18n from '@intlify/vite-plugin-vue-i18n'

// 自动导入element图标
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  // 获取.env文件里定义的环境变量
  const env = loadEnv(mode, process.cwd())
  // .env文件中的环境变量必须以VITE_为前缀,否则无法引用成功
  return {
    base: './',
    build: {
      publicDir: 'public',
      assetsDir: 'static',
      outDir: 'dist'
    },
    plugins: [
      vue(),
      AutoImport({
        // 自动导入 Vue 相关函数,如:ref, reactive, toRef 等
        imports: ['vue'],
        resolvers: [
          // 自动导入element plus相关函数(带样式)
          ElementPlusResolver(),
          // 自动导入图标组件
          IconsResolver({
            prefix: 'Icon',
            enabledCollections: ['ep']
          })
        ]
      }),
      Components({
        // 要搜索组件的目录的相对路径。默认 ['src/components']
        dirs: ['src'],
        // 组件的有效文件扩展名。
        extensions: ['vue'],
        // 搜索子目录
        deep: true,
        resolvers: [
          // 自动导入element plus组件
          ElementPlusResolver(),
          NaiveUiResolver(),
          // 自动注册图标组件
          IconsResolver({
            prefix: 'i',
            enabledCollections: ['ep']
          })
        ]
      }),
      Icons({
        compiler: 'vue3',
        autoInstall: true
      }),
      createSvgIconsPlugin({
        // 这个是自己配置的图标路径,指出来(自己咋配置的咋来)
        iconDirs: [resolve(process.cwd(), 'src/icons/svg')],
        // 这个表示id,按这个来就对了
        symbolId: 'icon-[dir]-[name]'
      }),
      vueI18n({
        include: resolve(__dirname, './path/to/src/locales/**')
      })
    ],
    resolve: {
      // 配置路径别名
      alias: {
        '@': resolve(__dirname, './src'),
        'api': resolve(__dirname, './src/api'),
        'views': resolve(__dirname, './src/views'),
        'utils': resolve(__dirname, './src/utils'),
        'comp': resolve(__dirname, './src/components'),
        'assets': resolve(__dirname, './src/assets'),
        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
      },
      extensions: ['.js', '.ts', '.vue', '.json', '.less', '.css']
    },
    define: {
      'process.env': { // 环境变量通常可以从 process.env 获得。注意Vite默认是不加载env文件的
        VITE_APP_BASE_API: 'https://xxx.com'
      }
    },
    server: {
      hmr: true, // vue3 vite配置热更新不用手动刷新
      host: '0.0.0.0',
      port: 3000, // 端口
      open: false, // 启动项目后打开浏览器
      hot: true,
      overlay: {
        warning: false,
        error: true
      },
      proxy: {
        [env.VITE_APP_BASE_API]: {
          target: 'https://xxx.com',
          ws: true,
          changeOrigin: true,
          secure: false,
          rewrite: path => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), '')
        }
      }
    }
  }
})
### 解决 `import.meta.env.VITE_APP_BASE_API` 报错问题 当遇到 `import.meta.env.VITE_APP_BASE_API` 使用时报错的情况,通常是因为 TypeScript 编译器无法识别这些环境变量。为了使 TypeScript 正确理解并允许访问自定义的环境变量,需要进行一些额外配置。 #### 配置 tsconfig.json 文件 为了让 TypeScript 认识到 Vite 的环境变量,在项目的根目录下找到或创建 `tsconfig.json` 文件,并添加如下设置: ```json { "compilerOptions": { "types": ["vite/client"] } } ``` 这一步骤确保了 TypeScript 能够加载 Vite 提供的类型声明文件[^4]。 #### 创建 .env 文件及其变体 对于不同运行模式下的环境变量管理,应该分别创建 `.env`, `.env.development`, 和 `.env.production` 文件来存储公共以及特定于开发和生产环境的变量。例如,在 `.env.development` 中可以这样定义 API 基础路径: ```plaintext ENV='development' VITE_APP_BASE_API='/dev-api' ``` 注意前缀 `VITE_` 是必需的;只有带有此前缀的变量才会被注入到客户端代码中作为 `import.meta.env` 属性的一部分[^3]。 #### 修改 vite.config.ts (如果适用) 有时还需要调整 Vite配置以更好地支持环境变量。可以在 `vite.config.ts` 中通过插件或其他方式进一步定制化处理。不过大多数情况下,默认行为已经足够满足需求。 #### 示例代码展示如何读取环境变量 下面是一个简单的例子展示了怎样安全地获取并打印 `VITE_APP_BASE_API` 变量值而不引发编译期错误: ```typescript // main.ts 或其他入口文件 console.log(import.meta.env.VITE_APP_BASE_API); // 输出 /dev-api 在开发环境中 ``` 以上措施应当能够有效消除关于未定义属性 `VITE_APP_BASE_API` 的警告信息,并让应用程序正常工作。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值