vue3+vite配置环境变量

配置环境变量

新建 .env（所有环境生效）.env.development（开发环境配置） .env.production（生产环境配置）

1. 定义变量

以 VITE_ 为前缀定义变量

VITE_BASE_URL = '//127.0.0.1:9000/api'

2. 定义变量ts类型

修改vite-env.d.ts

/// <reference types="vite/client" />
interface ImportMetaEnv {
  readonly VITE_BASE_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

3. vue中使用变量

import.meta.env.VITE_BASE_URL

4. 在vite.config.ts中使用环境变量

使用 loadEnv 读取环境变量

import { defineConfig, loadEnv } from 'vite';
//...

export default ({ mode }) => {
  console.log('mode', loadEnv(mode, process.cwd()).VITE_BASE_URL); //127.0.0.1:9000/api  
  return defineConfig({
      //...
  });
};

使用npm run dev 启动命令，读取.env 与 .env.development的内容

修改package.json

  "scripts": {
    "test":"vite --mode test", //新增
  },

使用 npm run test启动命令，读取.env 与 .env.test的内容

vue3+vite+ts项目配置开发环境和生产环境 打包命令配置_码农键盘上的梦的博客-CSDN博客