VUE根据不同环境配置变量

最新推荐文章于 2024-09-02 14:31:49 发布
最新推荐文章于 2024-09-02 14:31:49 发布
阅读量956 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyu_jerry/article/details/109562893
版权
本文介绍了如何在Vue CLI项目中根据不同的环境配置变量值，包括创建.env文件、指定打包模式，以及在main.js中使用环境变量。同时，强调了在不同环境文件中设置NODE_ENV为production的重要性，以及遵循VUE_APP_前缀的规则。
摘要由CSDN通过智能技术生成

vue cli 配置不同环境变量值

需求：项目开发过程中，对于同一个变量，在不同的环境测试下，需要取不同的值

// 比如产品编码
productNo = 'productNo1' // 开发环境
productNo = 'productNo2' // 测试环境
productNo = 'productNo3' // 正式环境

环境变量和模式官方参考链接：https://cli.vuejs.org/zh/guide/mode-and-env.html

在项目中使用

1.项目根目录下创建.env文件（ 用于所有环境）

NODE_ENV</
最低0.47元/天 解锁文章
wyu_jerry
关注
专栏目录
vue利用环境变量和模式实现不同部署环境下使用不同的变量值
u011050541的专栏
07-05 2374
vue利用环境变量和模式实现不同部署环境下使用不同的变量值文章背景概念简介1.环境变量使用方法2.如何构建不同模式工程具体实现1.在根目录下创建不同模式的配置文件2.package.json中的scripts配置项增加以下配置代码中使用环境变量构建版本 文章背景 开发过程中经常遇到这种情况： 相同的代码部署到不同环境时，需要使用不同的变量。例如：参数加密使用的秘钥SECRET_KEY，在测试环境和生产环境下一般都是不同的秘钥。 这种情况如果直接在项目代码中使用变量定义，在打包部署之前就需要根据环境切换成不同
关于vue项目 在不同环境的变量配置
wulijuan888666的博客
12-29 437
转载链接：https://blog.csdn.net/linbenjian/article/details/85261201 原文链接： https://blog.csdn.net/linbenjian/article/details/85261201 使用vue-cli3打包项目，通过配置不同的指令给项目设置不一样的配置。 npm run serve时会把process.env.NODE_ENV设置为‘development’； npm run build 时会把process.env.NODE_ENV设
[vue] index.html中获取process.env.NODE_ENV
最新发布
qq_14993591的博客
09-02 374
【代码】[vue] index.html中获取process.env.NODE_ENV。
vue项目配置不同的环境变量
qq_38424174的博客
03-30 2023
由于项目要求 部署不同的环境及目录，为了方便打包与部署，配置不同的开发环境变量与部署路径
vue-cli配置环境变量的方法
08-27
本篇文章主要介绍了vue-cli配置环境变量的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目环境变量配置的实现方法
12-09
实际开发中，开发环境和生产环境中一些变量是不同的，比如接口地址等等，打包之前需要手动切换。 编译时 新建env.js let baseUrl = ''; if(process.env.NODE_ENV == 'production'){ baseUrl = '...
vue3.0环境变量配置.md
04-08
vue3.0环境变量配置大致思路： 1，创建修改相关配置文件（Ctrl + C V即可） 2，封装 axios（根据配置文件，首先判断当前环境，获取对应环境的数据库地址作为当前环境...4，使用插件对代码进行测试判断环境配置是否成功
vue - vue的index.html中获取环境变量和业务判断
qq_43886365的博客
04-20 8346
vue的index.html中获取环境变量和业务判断
vue2x版本index.html种获取环境变量
momo_mom177的博客
02-11 5718
在vue文件中可以直接用 process.env.VUE_APP_xxx 获取到 自定义环境变量， 但是在index.html中只能使用<%= VUE_APP_xxx %> 字符串获取到，之前看到网上说的直接写在html中直接写：如下图，但是内部也获取不到环境变量process <% if (process.env.VUE_APP_environment === 'production' ) { %> <script> // js 代码 .
vue-cli的index.html中使用环境变量
热门推荐
ltf_1225的博客
01-03 1万+
项目中使用了公司定义的统一头部文件，需要引入header.js和header.css。负责人希望各个环境引入各自的js和css。 当时第一反应是process，但是在index.html里打印报错，所以最初是根据域名去判断，然后动态修改src和href值。感觉很麻烦。 翻阅cli官方文档后看到了这样一段话。 遂使用了一下，发现是可以的，具体写法如下： .env.xxx环境文件中定义变量...
vue index.html环境变量,vue项目的环境变量
weixin_32187075的博客
06-19 857
关于项目中环境变量的总结背景项目环境通常分为开发环境，测试环境，线上环境由于每一个环境的接口域名、webpack 配置都是不一样的，因此在打包构建时，咱们须要区分这些环境，这时就用到了环境变量在工做中使用到了两种方法来区分，下面将这两种方式一一列举出来技术框架是vue-cli@2.xjavascript首先看下下面的解释，后面会用到< process 对象是一个全局变量，提供 Node.js...
vue index.html环境变量,Vue环境变量和模式
weixin_36111561的博客
06-19 743
Vue环境变量和模式我最开始使用vue的判断环境的方法是let BASE_URL = process.env.NODE_ENV == "development" ? "http:/localhost" : "xxx"在这种情况下，需要先判断它的编译环境，进而根据环境适用对应的值。如果只有一个地方的变量跟环境有关，情况还好。但是若有多个，则需要复制多个判断或者封装成一个方法。但也只能使用于两个环境，...
vue-cli的index.html中使用环境变量(转)
JXMaker
07-13 3461
项目中使用了公司定义的统一头部文件，需要引入header.js和header.css。负责人希望各个环境引入各自的js和css。 当时第一反应是process，但是在index.html里打印报错，所以最初是根据域名去判断，然后动态修改src和href值。感觉很麻烦。 翻阅cli官方文档后看到了这样一段话。 遂使用了一下，发现是可以的，具体写法如下： .env.xxx环境文件中定义变量： VUE_APP_APIURL = “http://test.xxxx.com.cn” 然后html文件中使用 ———
vue-cli在不同环境下赋予变量不同的值
围巾落地的博客
02-05 498
最近在github上搭个人主页，因为要使用github的api，必须用到owner和repo的值。 https://api.github.com/repos/:owner/:repo/issues 在开发环境下，可以自己赋值；在生产环境下，我则希望直接通过window.location.pathname获得。 在创建vue-cli时会自动配置环境变量，生产环境是production，开发环境是...
vue index.html环境变量,Vue环境变量的配置
weixin_36182568的博客
07-04 1492
一看就懂的vue环境变量配置这是基于cli3.x版本的环境变量配置指南。没有过多复杂的介绍，只有极简的实用配置。旨在给需要的朋友提供帮助以及自己温故知新，真正一看就会懂，懂了就能用。项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，...
vue环境变量
weixin_42666092的博客
06-11 5283
1.mode 模式 设置后， --mode production,是在打包后生成的文件中启动触发， --mode development 是在开发环境下启动触发触发 模式设置，在package.json 的 scripts属性中设置的命令 development(开发环境) 模式用于 vue-cli-service serve test(测试) 模式用于 vue-cli-service test:unit production(生产环境) 模式用于 vue-cli-service build 和 vu
vue3 获取环境变量中的值
哈
05-17 651
对象来访问环境变量。这些变量应该在项目根目录中的 .env 文件或者相应的环境文件（.env.local, .env.development, .env.production 等）中定义。，并在这些文件中设置不同的值。当运行应用时，Vue CLI 会根据选择的模式（development 或 production）自动选择合适的文件。如果需要在不同的环境中有不同的值，可以创建多个环境文件，如。在 Vue 3 中，可以使用。
vue-cli在index.html判断环境变量加载不同代码
lihefei_coder的博客
04-08 4112
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值