vue-cli3 快速配置多环境变量

最新推荐文章于 2025-01-13 09:00:00 发布
原创 最新推荐文章于 2025-01-13 09:00:00 发布 · 1.2w 阅读 · 25 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了vue-cli3搭建项目的多环境变量配置方法。可通过为.env文件增加后缀设置特定模式环境变量，传递--mode选项参数覆写默认模式。在项目根目录新建对应开发、测试、生产的.env文件，还需修改package.json脚本。

vue-cli3 搭建的项目其实看起来比 cli2 简单明了很多，官方也有相关文档对多环境变量配置的描述。
https://cli.vuejs.org/zh/guide/mode-and-env.html

1.首先：
通过为 .env 文件增加后缀来设置某个模式下特有的环境变量
通过传递 --mode 选项参数为命令行覆写默认的模式

在项目的根目录新建3个文件夹，分别对应开发（dev），测试（test），生产（prod）
文件命名： .env.dev , .env.test , .env.prod

在这里插入图片描述
接下来是不同文件里面的代码情况，
.env.dev

NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASEURL = '本地开发api地址'

.env.test

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'test'
VUE_APP_BASEURL = '测试环境api地址'

.env.prod

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'prod'
VUE_APP_BASEURL = '正式环境api地址'

2.修改package.json 脚本：

在这里插入图片描述
3.最后总结：

npm run dev		//本地运行
npm run build:test      //测试环境打包
npm run build:pro 		//正式环境打包
Vue CLI 环境变量使用指南
dazhong2012的专栏
06-08 2339
Vue CLI 的环境变量功能为前端项目提供了极大的灵活性和便利性。通过合理使用环境变量，可以轻松管理不同环境下的配置，实现项目的快速部署和高效运行。掌握环境变量的使用，是前端工程化的重要一步。注意：在使用环境变量时，请确保不要将敏感信息（如API密钥、数据库密码等）硬编码在代码中。对于生产环境的变量，应使用安全的配置管理方式。
vue-01环境配置
最新发布
weixin_39900427的博客
11-26 976
Vue.js是一个基于MVVM架构的JavaScript框架，用于构建用户界面。它采用组件化开发模式，支持单页面应用(SPA)开发。本文详细介绍了Vue.js的安装与项目创建流程：首先安装Node.js和npm，配置国内镜像源；然后通过yarn创建vite项目，包括项目初始化、依赖安装和运行；最后介绍了VSCode开发环境配置及常见问题解决方法。整个流程涵盖了从环境搭建到项目运行的完整步骤，为Vue.js初学者提供了清晰的入门指南。
vue 3 第三十六章：vite环境变量（.env文件的配置及使用）
热门推荐
to_the_Future的博客
06-11 2万+
通过使用.env文件，我们可以轻松管理不同环境下的配置。在Vite的应用程序中，可以使用import.meta.env对象来访问环境变量，并根据不同的环境使用不同的配置。这样可以使我们的应用程序更加灵活和易于维护。
vue-cli3 配置 vue.config.js 环境变量env
没有翅膀的我们，只是随便认为不能飞而已
10-13 7256
const path = require("path"); const uglifyJsPlugin = require("uglifyjs-webpack-plugin"); const IsProduction = process.env.NODE_ENV === "production"; // 引入文件 function resolve(dir) { return path.jo...
vue3+ts项目中.env配置环境变量与情景配置
我愿化作繁星
07-03 4827
就是在编码过程中应用这些自定义环境变量的时候，给出的智能提示。src目录下创建一个或者env.d.ts文件src同级别types目录下创建文件env.d.ts// 更多环境变量...在文件中专门用于处理项目src文件中的TypeScript配置文件，include配置项加入文件：(会提示自定义设置的环境变量)// ...// 第一种方式对应配置"vite-env.d.ts", // 或者 "env.d.ts"// 第二种方式对应配置。
vue-cli3添加模式配置多环境变量的方法
12-09
以下是对 Vue CLI 3 添加模式配置多环境变量方法的详细解释： 首先，环境变量和模式在开发过程中起着至关重要的作用。它们允许我们根据当前的运行环境来调整应用的行为，例如在预发环境中设置不同的接口地址，或者...
vue-cli配置环境变量的方法
12-12
在实际项目开发中,经常会碰到需要环境变量的情景,在vue-cli的环境下,默认已经配置了一个NODE_ENV的环境变量,当npm run dev的时候这个是development, 当npm run build 的时候这个是production.用过vue-cli开发的通常...
vue-cli脚手架-bulid下的配置文件
08-27
Vue-cli项目的环境变量和依赖项是项目开发和构建的关键部分。环境变量用于配置项目的开发、测试和生产环境。依赖项则用于配置项目的依赖模块，例如Vue.js、Webpack、ESLint等。 六、总结 Vue-cli脚手架bulid下的...
vue-cli2与vue-cli3在一台电脑共存的实现方法
10-16
配置环境变量的目的是为了让系统能够识别并运行我们所安装的两个版本的Vue CLI。具体来说，就是将两个`.bin`文件夹的路径添加到系统的环境变量中。这样，在命令行中输入`vue-cli2`或`vue-cli3`时，系统能找到对应的...
如何使用和配置 AWS CLI 环境变量？
2401_85233349的博客
08-15 2118
环境变量在您不能承受错误的生产环境中非常有用。注意：上面的例子将仅为当前会话设置一个环境变量，但如果您想为所有会话设置一个环境，那么在 Windows 的情况下，您可以使用'setx'而不是'set'，而在 Linux/MacOS 的情况下，您可以在 shell 启动脚本中设置变量。当您处理敏感信息时，包括不建议使用硬编码且不希望在每个命令中指定它们的 AWS 访问密钥，因此，出于此目的，如果您使用环境变量，这将允许您避免在每个命令中指定凭据，并且将您的凭据与代码分开将最大限度地降低泄露敏感信息的风险。
Vue3中配置env环境变量
weixin_59244784的博客
01-05 2131
Vue3中配置env环境变量
vue中webpack默认配置_vuecli3中webpack配置相关
weixin_36070797的博客
01-14 292
1.环境变量和模式在开发项目过程中，正常情况下会有本地开发环境，测试线环境，线上正式线环境等，不同环境的配置会有所不同，比如我们服务器地址，接口地址等等。所以我们要区分，那就需环我们配置境变量和模式，来管理。一、环境变量的4种方式在官方文档中，CLI3.0有四种方式来指定环境变量：.env # 在所有的环境中被载入.env.local # 在所有的环...
vue3项目开发中 env文件是怎么配置的
嗨，欢迎来到我的 优快云 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
01-13 5599
如何在`.env`文件中配置多个环境的变量？
.env文件配置---全局环境变量(以Vue3为例)
yasuo56的博客
06-06 1740
.env文件配置---全局环境变量(以Vue3为例)
【Vue3】env环境变量的配置和使用（区分cli和vite）
黎明总是如期而至
05-20 5449
目前vue程序可以通过cli和vite两种方式构建，但是两种方式加载env的方式有些不同，这里基于自己的理解简单记录。
Vue3的Env环境变量配置的应用
weixin_53035812的博客
11-26 1932
.env（# 所有环境默认） # 所有环境默认 # 页面 title 前缀 VUE_APP_TITLE=某某某 # 网络请求公用地址 VUE_APP_API= / .env.development（# 开发环境） # 开发环境 # 指定构建模式 VITE_NODE_ENV=development # 页面 title 前缀 VUE_APP_TITLE=图菱 # 网络请求公用地址 VITE_APP_API=/api/ # 首页是否显示登录 VITE_SHOW_LOGIN='yes'
vue-cli3+ 搭建pc端管理项目（二, 不同环境配置[开发，测试，生产]）
Smile0L0的博客
09-01 577
项目开发中，会使用到不同的运行环境，例如：开发环境，测试环境，生产环境。 1. 配置打包命令 package.json文件中 修改 serve，build 命令，并添加 test 命令。如下： // package.json "scripts": { "serve": "vue-cli-service serve --mode development", "build": "vue-cli-service build --mode production", "test":
vue3 .env 环境变量的配置及应用
这是个问题
11-18 4159
vue3 .env环境文件的配置与使用
vue-cli-service 配置环境变量
12-26
Vue CLI Service (VCS) 是 Vue.js 提供的一个脚手架工具，用于管理和构建 Vue 应用程序。它支持配置环境变量，特别是对于处理敏感信息如API密钥、数据库连接等，这些通常会被存储在 `.env` 文件中，以保持项目的安全性。 要在 VCS 中配置环境变量，你需要按照以下步骤操作： 1. **创建.env文件**： - 在项目根目录下，如果没有 `.env` 文件，可以手动创建一个新的文本文件，名为 `.env`，这是默认的环境变量文件。 - Windows用户可能需要将文件名改为 `.env.production` 或 `.env.development` 根据你的开发阶段选择合适的环境。 2. **添加环境变量**： - 使用标准的键值对格式编写，例如 `VUE_APP_API_KEY=your_api_key`。这里的 `VUE_APP_` 是一个约定前缀，方便识别哪些是应用相关的环境变量。 3. **启用环境变量**： - 打开 `vue.config.js` 文件（如果是 v4），或者在 `package.json` 的 scripts 对象内（如果是 v3）。在这里，你可以配置 VCS 来读取环境变量，如下所示： ```javascript // vue.config.js (v4) module.exports = { chainWebpack: config => { if (process.env.NODE_ENV === &#39;production&#39;) { config.resolve.symlinks(true).alias .set(&#39;@env&#39;, resolve(&#39;src/environments&#39;)) } }, }; // package.json (v3) "scripts": { "dev": "cross-env VUE_APP_API_KEY=<your_api_key> vue-cli-service serve", "build": "vue-cli-service build" } ``` 4. **引用环境变量**： - 在你的 Vue 组件、路由守卫或任何其他地方，你可以通过 `import()` 或 `process.env.VUE_APP_API_KEY` 访问这些环境变量。
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值