详解在vue开发中如何利用.env文件

# 页面标题
VITE_APP_TITLE = 管理系统

# 开发环境配置
VITE_APP_ENV = 'development'

# 管理系统/开发环境
VITE_APP_BASE_API = '/'

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode development",
    "build:pro": "vue-cli-service build --mode production",
    "build:test": "vue-cli-service build --mode test",
  },

# 页面标题
VITE_APP_TITLE = 管理系统

# 环境配置
VITE_APP_ENV = 'development'

# api 基础路径
VITE_APP_BASE_API = '/dev-api'
// 或
VUE_APP_BASE_API = '/dev-api'

// 在 vite 程序中获取
console.log(import.meta.env.VITE_APP_BASE_API); // /dev-api
// 在 vue2 项目中获取
console.log(process.env.VUE_APP_BASE_API); // /dev-api

import { defineConfig, loadEnv } from 'vite'

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