vite .env环境变量配置

官方文档https://cn.vitejs.dev/config/

1. .env.development和.env.production(放在根目录下，一定看清楚别放在SRC下)

    默认情况下，开发服务器 (

dev

命令) 运行在

development

(开发) 模式，而

build

命令则运行在

production

(生产) 模式。

    在某些情况下，若想在 

vite build

时运行不同的模式来渲染不同的标题，你可以通过传递

--mode

选项标志来覆盖命令使用的默认模式。例如，如果你想在 staging （预发布）模式下构建应用：

vite build --mode staging

使用vite环境变量命名必须以VITE_开头否则无法识别

.env.development

# 本地环境
NODE_ENV = 'development'

#本地环境接口地址
VITE_BASE_URL = 'https://mock.apifox.cn/m1/2303444-0-default'

.env.production

# 生产环境
NODE_ENV = 'production'

#生产环境接口地址
VITE_BASE_URL = 'https://mock.apifox.cn/m1/2303444-0-default'

2. vite弃用了process.env改用import.meta.env（vite.config.js中不能使用import.meta.env）

Vite 在一个特殊的 **

import.meta.env

** 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：

• import.meta.env.MODE: {string} 应用运行的模式。
• import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
• import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
• import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
• import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

3. vite.config.js中使用环境变量地址进行跨域

环境变量通常可以从

process.env

获得。

注意 Vite 默认是不加载

.env

文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个，举个例子，

root

和

envDir

选项会影响加载行为。不过当你的确需要时，你可以使用 Vite 导出的

loadEnv

函数来加载指定的

.env

文件。

js

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // vite 配置
    define: {
      __APP_ENV__: env.APP_ENV,
    },
  }
})

配置跨域

export default defineConfig(({mode}) => {
  const env = loadEnv(mode, process.cwd());
  return ({
    plugins: [vue()],
    resolve: {},
    server: {
      port: 8088,
      proxy: {
        '/api': {
            target:env.VITE_BASE_URL,
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    }
  })
})