vue多环境配置和打包

件名的后缀来指定它们仅在特定模式下被加载。

.env:所有环境下都会加载的通用配置。

.env.local:本地覆盖配置,不加入版本控制。

.env.[mode]:仅为指定的模式加载的配置文件,例如.env.development、.env.production、.env.test。

  1. 配置环境变量

在每个.env文件中,你可以定义环境变量。这些变量可以在你的Vue应用或webpack配置中使用。变量需要以VUE_APP_为前缀才能被webpack识别。

例如,在.env.production中:

bash 复制代码
VUE_APP_API_URL=https://api.example.com/prod  
VUE_APP_TITLE=生产环境标题
在.env.development中:
bash 复制代码
VUE_APP_API_URL=http://localhost:3000/api  
VUE_APP_TITLE=开发环境标题
  1. 在Vue组件或插件中使用环境变量
    在Vue组件中,你可以通过import.meta.env来访问这些环境变量:
javascript 复制代码
// 在Vue组件中  
export default {  
  mounted() {  
    console.log(import.meta.env.VUE_APP_API_URL);  
    console.log(import.meta.env.VUE_APP_TITLE);  
  }  
}
  1. 在webpack配置或其他Node.js脚本中使用环境变量
    在webpack配置或其他Node.js脚本中,你可以通过process.env访问环境变量,但注意只有以VUE_APP_开头的变量才会被webpack定义到process.env中。
javascript 复制代码
// 在webpack配置文件中  
const apiUrl = process.env.VUE_APP_API_URL;  
  
module.exports = {  
  // webpack配置...  
};
  1. 切换环境
    当你需要切换环境时,你可以通过Vue CLI的命令来指定模式,例如:
bash 复制代码
npm run serve -- --mode development  
npm run build -- --mode production

Vue CLI会自动加载对应模式的.env文件,并将变量注入到你的项目中。

  1. 注意事项
    确保你的环境变量名称以VUE_APP_为前缀,否则它们将不会通过import.meta.env或webpack的process.env暴露。
    本地测试时,可以使用.env.local文件来覆盖.env和.env.[mode]中的变量。
    记住将.env.local加入你的.gitignore文件,以避免将敏感信息提交到版本控制系统中。
相关推荐
老华带你飞1 小时前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
GISer_Jing1 小时前
React 18的createRoot与render全面对比
前端·react.js·前端框架
我叫汪枫1 小时前
React Hooks原理深度解析与高级应用模式
前端·react.js·前端框架
我叫汪枫1 小时前
深入探索React渲染原理与性能优化策略
前端·react.js·性能优化
Ares-Wang2 小时前
Vue3》》eslint Prettier husky
开发语言·javascript·ecmascript
阿智@112 小时前
推荐使用 pnpm 而不是 npm
前端·arcgis·npm
EveryPossible2 小时前
静态箭头连线
开发语言·javascript·ecmascript
伍哥的传说2 小时前
QRCode React 完全指南:现代化二维码生成解决方案
前端·javascript·react.js·qrcode.react·react二维码生成·qrcodesvg·qrcodecanvas
IT_陈寒2 小时前
Vite 5.0 终极优化指南:7个配置技巧让你的构建速度提升200%
前端·人工智能·后端
listhi5202 小时前
Map对象在JavaScript循环中的使用
开发语言·前端·javascript