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

原创已于 2024-02-01 17:59:23 修改 · 3.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

于 2023-10-24 17:57:15 首次发布

vue3 同时被 2 个专栏收录

18 篇文章

订阅专栏

vite

2 篇文章

订阅专栏

文章讲述了如何在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}`), '')
        }
      }
    }
  }
})