配置环境变量
新建 .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_URL4. 在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文章来源：https://www.toymoban.com/news/detail-509842.html
"scripts": {
"test":"vite --mode test", //新增
},
使用 npm run test启动命令，读取.env 与 .env.test的内容
vue3+vite+ts项目配置开发环境和生产环境 打包命令配置_码农键盘上的梦的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-509842.html
到了这里，关于vue3+vite配置环境变量的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![在vite或者vue-cli中使用.env[mode]环境变量](https://imgs.yssmx.com/Uploads/2024/02/459254-1.png)
