vue中环境变量文件

📅 2026/7/2 5:51:25 👁️ 次浏览

1. 环境变量文件的作用是什么主要有三个核心作用环境隔离区分开发dev、测试test和生产prod环境让代码在不同环境下自动使用不同的配置例如开发环境调用测试接口生产环境调用正式接口。保护敏感信息将 API 密钥、后端接口地址等硬编码信息从代码中抽离出来避免提交到 Git 仓库降低泄露风险注意Vite 下只有编译时暴露的变量才能被前端访问。提升维护性修改配置时无需改动业务代码只需修改环境变量文件即可。2. 文件中应定义哪些变量命名规则在 Vite 项目中只有以VITE_开头的变量才会被客户端你的 Vue 组件和页面正常读取。变量名作用说明示例值VITE_API_BASE_URL后端接口的基础地址http://localhost:3000/api(开发)https://api.example.com(生产)VITE_APP_TITLE页面标题或应用名称我的管理系统VITE_APP_ENV当前运行环境标识development/productionVITE_UPLOAD_URL文件上传专用服务器地址https://upload.example.com特别注意如果你在vite.config.ts中需要使用变量而非前端页面则不受VITE_前缀限制可以直接读取所有变量。3. 如何创建文件并定义变量在项目根目录即package.json所在的目录下创建以下文件.env通用配置无论什么环境都会加载优先级最低。.env.development开发环境加载执行npm run dev时生效。.env.production生产环境加载执行npm run build时生效。示例.env.development文件内容# 注意不要加引号变量值默认会被当作字符串 VITE_API_BASE_URLhttp://localhost:8080 VITE_APP_TITLE本地开发版 VITE_APP_ENVdevelopment示例.env.production文件内容VITE_API_BASE_URLhttps://api.yourcompany.com VITE_APP_TITLE正式上线版 VITE_APP_ENVproduction4. 如何在代码中调用这些变量A. 在 Vue 组件或 JavaScript/TypeScript 文件中前端代码使用全局对象import.meta.env来访问template div h1{{ title }}/h1 p接口地址{{ apiUrl }}/p /div /template script setup // 直接通过 import.meta.env 读取 const title import.meta.env.VITE_APP_TITLE const apiUrl import.meta.env.VITE_API_BASE_URL // 实际请求示例axios.get(${apiUrl}/user/list) /scriptB. 在vite.config.ts配置文件中Node.js 环境使用 Node 的process.env读取但需要先加载环境文件。Vite 提供了loadEnv工具// vite.config.tsimport{defineConfig,loadEnv}fromviteimportvuefromvitejs/plugin-vueimportvueDevToolsfromvite-plugin-vue-devtoolsexportdefaultdefineConfig(({mode}){// 根据当前运行模式加载对应的 .env 文件constenvloadEnv(mode,process.cwd(),)return{plugins:[vue(),vueDevTools(),],// 例如在配置中读取端口号注意这里不受 VITE_ 前缀限制server:{port:parseInt(env.VITE_PORT)||3000,proxy:{/api:{target:env.VITE_API_BASE_URL,// 读取接口地址changeOrigin:true,}}}}})⚠️ 核心注意事项修改后必须重启每次修改.env文件后必须手动停止CtrlC并重新运行npm run dev否则修改不会生效。类型提示TypeScript如果你使用 TS为了让import.meta.env有智能提示可以在env.d.ts中补充声明/// reference typesvite/client /interfaceImportMetaEnv{readonlyVITE_API_BASE_URL:stringreadonlyVITE_APP_TITLE:string}interfaceImportMeta{readonlyenv:ImportMetaEnv}.gitignore配置请务必在.gitignore文件中添加.env.local、.env.*.local防止本地敏感配置泄露。但.env.development和.env.production这类通用模板可以提交视团队规范而定。变量值无需引号在.env文件中写VITE_NAME张三即可不要写成VITE_NAME张三否则引号会被当成字符串的一部分。布尔值处理import.meta.env读取的全是字符串。如果需要布尔类型需手动判断例如const isDev import.meta.env.VITE_APP_ENV development。

相关新闻