Vue3 vite.config.js环境变量配置（自己记录）

1. 在根目录新建两个文件(分别对应生产和开发环境)

.env.production

# .env.produciton
VITE_APP_BASE_API = xxxxx

.env.developemnt

# .env.development
VITE_APP_BASE_API = xxx1
VUE_APP_BASE_API = xxx2

• 默认vite只会暴露VITE开头变量。此时可以在其他文件通过import.meta.env.变量名获取环境变量

2. vite.config.js
最主要的是： loadEnv 和 envPrefix; define可以设置常量，官方解释

WARNING

因为它是不经过任何语法分析，直接替换文本实现的，所以我们建议只对 CONSTANTS 使用 define。

例如，process.env.FOO 和 __APP_VERSION__ 就非常适合。但 process 或 global 不应使用此选项。变量相关应使用 shim 或 polyfill 代替。

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { resolve } from 'path'
export default defineConfig(({command, mode}) => {
  const env = loadEnv(mode, process.cwd(), '')
  return {
    plugins: [vue(), vueJsx()],
    envPrefix:  ['VITE', 'VUE'], // 环境变量前缀,默认只会暴露VITE开头变量，定义后可暴露VUE开头变量
    base: '/',
    build: {
      outDir: 'dist',
    },
    define: {
      'process.env.VITE_APP_BASE_API':JSON.stringify(env.VITE_APP_BASE_API)
    },
    server: {
      port: 3001,
      host: '127.0.0.1',
      proxy: {
        '/api': {
          target: 'http://' + env.VUE_APP_BASE_API,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '/')
        }
      },
    },
    // 目录别名
    resolve: {
      alias: {
        '@': resolve(__dirname, '.', 'src')
      }
    },
    // 打包后静态资源 存放目录
    assetsDir: ''
  }
})