vue3+vite 配置环境变量，区分生产和测试环境配置环境变量，区分生产和测试环境首先在项目最外层目录新建.env[

配置环境变量，区分生产和测试环境

首先在项目最外层目录新建.env[mode]文件

在对应的环境文件中配置环境参数，需要加上VITE_前缀才能在后续读取

VITE_BASE_URL=https://hhh.com // 在.env.development/.env.production 文件中配置

在package.json文件的启动命令上加上--mode [mode]，vite指令默认测试环境，vite build默认构建生产环境

  "scripts": {
    "dev": "vite",
    "dev:prod": "vite --mode production",
    "build": "vite build --mode development",
    "build:prod": "vite build --mode production"
  }

如果要在项目中获取在.env中配置的环境参数使用import.meta[参数名]

const baseUrl = import.meta.env.VITE_BASE_URL // VITE_BASE_URL需要配置在当前运行的环境文件中

vite默认不加载.env文件，会在执行完vite配置后才确定加载哪个，如果需要在vite.config.js中读取参数值，需要以下操作，通过const env = loadEnv(mode, process.cwd(), '')获取.env信息

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,
    },
  }

配置快捷目录

如果试用的是vue3官方推荐的脚手架生成，则会自带该配置，后续可以通过@访问src文件夹

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

参考

命令行界面

配置Vite