vue利用环境变量和模式实现不同部署环境下使用不同的变量值

最新推荐文章于 2023-11-24 10:53:35 发布
VIP文章 最新推荐文章于 2023-11-24 10:53:35 发布
阅读量2.3k 收藏 7
点赞数 1
文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011050541/article/details/107136391
版权

vue利用环境变量和模式实现不同部署环境下使用不同的变量值

文章背景

开发过程中经常遇到这种情况：
相同的代码部署到不同环境时，需要使用不同的变量。例如：参数加密使用的秘钥SECRET_KEY，在测试环境和生产环境下一般都是不同的秘钥。
这种情况如果直接在项目代码中使用变量定义，在打包部署之前就需要根据环境切换成不同的值，再打包，不利于代码的维护。
这种情况可以利用环境变量和模式来实现，在不用每次打包前改变量的情况下，通过不同的打包命令在代码中使用不同的环境变量。

概念简介

最低0.47元/天 解锁文章
惟馨
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
深入浅析vue全局环境变量和模式
11-21
我们可以在项目根目录中的下列文件来指定环境变量： .env                # 在所有的环境中被载入 .env.local          # 在所有的环境中被载入，但会被 git 忽略 .env.[mode]         # 只在指定的模式中被载入 .env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略 一个环境文件只包含环境变量的“键=值”对,并且必须以VUE_APP开始: FOO=bar     //无效 VUE_APP_SECRET=secret  有效 模式 模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个
Vue多环境配置
小强崽的博客
07-17 1761
一、新建配置 # 开发环境 .env.dev # 集成测试 .env.sit # 验收测试 .env.uat # 生产环境 .env.prod .env.dev ENV = 'dev' VUE_APP_SERVER_API = 'http://localhost:8080/api/pavilion' .env.sit ENV = 'sit' VUE_APP_SERVER_API = 'http://192.168.8.246:8080/api/pavilion' .env.uat ENV = '
vue配置环境变量的几种方式
weixin_46913268的博客
07-07 4596
vue配置环境变量的几种方式
vue-cli配置环境变量
博哥的二进制世界
11-09 457
vue-cli配置环境变量项目根目录创建.env文件修改package.json命令行，加上--mode xxx项目中获取环境变量 项目根目录创建.env文件 ①.env.dev NODE_ENV=development ②.env.uat NODE_ENV=uat ③.env.sit NODE_ENV=sit ④.env.prod NODE_ENV=production 修改package.json命令行，加上–mode xxx package.json命令行，-- mode xxx与.env
vue中.env文件配置环境变量
weixin_44161385的博客
03-29 1681
vue中.env配置环境变量
Vue学习日记21
NLP工程化
12-13 618
1.jQuery DOM元素方法 解析： [1].get()：获得由选择器指定的DOM元素。 [2].index()：返回指定元素相对于其他指定元素的index位置。 [3].size()：返回被jQuery选择器匹配的元素的数量。 [4].toArray()：以数组的形式返回jQuery选择器匹配的元素。 2.jQuery核心函数 解析： [1]jQuery()：接受一个字符串，其中包含了用于匹...
vue3 + vite中开发环境和生产环境全局变量配置
热门推荐
小绵杨
06-01 1万+
开发环境：也就是编码时运行的环境，即我们使用npm run dev或者npm run serve运行项目到本地时，项目处于的环境。生产环境：项目部署到服务器上后处于的环境，我们使用npm run build将项目打包以后，再运行项目，项目就运行在生产环境中了。对于不同的环境，我们可以配置不同的环境变量，来实现开发和生产的兼容。例如： 开发环境时，我们可以请求自己本地的接口（‘/api’ proxy代理）。 而部署到服务器上后，应该请求服务器提供的接口（‘http://xxxxxx/api/’ 真实接口）。
vue打包时使用不同的环境变量
weixin_30375427的博客
07-08 701
vue打包时使用不同的环境变量 需求 同一个项目通过打包使用不同的环境变量，目前的环境有三个： 一、本地------开发环境 二、线上------测试环境 三、线上------正式环境 我们都知道vue默认的打包都是生产模式，所以说打包后的都是线上的东西，现在我们解决一下如何通过不同命令的打包方式使用不同的环境变量。 安装cross-env npm install cross-env --save...
vue cli4下环境变量和模式示例详解
11-20
本文介绍了vue cli4下环境变量和模式示例详解，分享给大家，具体如下： 官方文档 环境变量 一个环境变量文件只包含环境变量的键值对： NODE_ENV=development VUE_APP_BASE_URL=http://127.0.0.1:8080/ 注意： ...
vue项目环境变量配置的实现方法
12-09
实际开发中，开发环境和生产环境中一些变量是不同的，比如接口地址等等，打包之前需要手动切换。 编译时 新建env.js let baseUrl = ''; if(process.env.NODE_ENV == 'production'){ baseUrl = '...
vue不同环境打包配置不同 vue环境变量配置
Baby_加油_的博客
03-15 4315
（即每个环境对应变量的变量值都是一样的时候，则可以将变量定义在公用的.env文件中，而对应每个环境的 .env.xxx文件中则不需要再重复定义此变量）.在.env.xxx 文件中只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量会通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。vue-cli-service build --mode test :命令中的test对应的是 .env.xxx 文件的后缀名，如果也找不到.env.test文件，则打包报错。
Vue+webpack项目的多环境打包配置(vue-cli 2.x)
Cool的博客
08-12 1906
背景：由于需要将应用部署到线上开发环境、线上测试环境、线上预发环境、线上生产环境，而每个环境的访问地址是不同的。如果每次更改请求地址未免有些繁琐，就考虑在本地进行一次性配置。 代码管理工具：git 代码分支： 1.0-dev // 开发分支 1.0-test // 测试分支 1.0-pre // 预发分支 1.0 // 正式分支 应用部署服务器：阿里云服务器 一、安装依赖：cross-env 使用cross-env解决跨平台设置环境变量的问题 安装：np...
vue2项目从0搭建(三):配置环境变量及对应的webpack配置
最新发布
m0_54741495的博客
11-24 2197
实际业务开发中,一个项目很可能会同时配置好几套环境。比如:常规开发环境,开发测试环境,正式的测试环境,预发测试环境,客户甲的生产环境,客户乙的生产环境,通用生产环境,独立应用环境,微前端环境,大屏专用环境,移动端环境。一女多嫁的实际业务场景,就需要我们进行多样化的环境配置。不同的环境需要有不同的一些标识,也要有一些不同的webpack配置或者资源优化。个人认为这里的知识是十分重要的,因为这里对于工作中实际交付项目或者多客户客制化开发是很重要的。
D2 Admin 环境变量和模式
weixin_45899022的博客
11-19 849
环境变量和模式 概述： 可以替换项目根目录中的下列文件来指定环境变量： .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入，但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略 一个环境文件只包含环境变量的“键=值”对： VUE_APP_API = http:...
vue-cli在不同环境下赋予变量不同的值
围巾落地的博客
02-05 475
最近在github上搭个人主页，因为要使用github的api，必须用到owner和repo的值。 https://api.github.com/repos/:owner/:repo/issues 在开发环境下，可以自己赋值；在生产环境下，我则希望直接通过window.location.pathname获得。 在创建vue-cli时会自动配置环境变量，生产环境是production，开发环境是...
vue-cli环境变量与模式
陈坚泓的博客
04-18 3848
vue-cli环境变量与模式模式环境变量环境文件加载优先级示例：Staging 模式在客户端侧代码中使用环境变量public/index.html只在本地有效的变量推荐阅读 你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特 《人生果实》经典语录 vue-cli3.0移除了配置文件目录： config和build文件夹。改为.env自定义配置环境变量和模式 日常工作中，主要用来区分本地开发环境，测试环境，正式环境的全局配置，例如服务器地址、接口地址、websocket地址…… ，通过环境变量和模
vue如何配置研发/测试/生产环境?
Meta.Qing的博客
08-26 1810
我们在vue项目根目录添加以下3个文件:.env.development #本地开发环境.env.test #部署测试环境.env.production #部署生产环境#拓展.env # 在所有的环境中被载入.env.local # 在所有的环境中被载入，但会被 git 忽略例如FOO=bar#警告#不要在你的应用程序中存储任何机密信息（例如私有 API 密钥）！#......
npm 包 chalk-next 被开发者投毒，源码 SRC 目录被删除
murphysec的博客
01-06 3788
从开发者chuzhixin的回应和代码中的行为来看，作者的行为可能难以定义是恶意还是正义，所幸当前应该没有造成实质性的危害。但通过-next复刻原有项目重新发布确实容易令人混淆，对于使用开源组件的众多开发者而言又是一次信任的崩塌，开源不等于免费，也不等于安全，在使用中还是需要仔细甄别。对于企业而言，类似的开源组件投毒的情况每天都在发生，需要及时建立相应的检测识别、处置响应能力。该投毒已上线漏洞库，担心源码被删，快速检测自己的代码，查看风险详情🔍。
vue2怎么配置环境变量，让不同环境使用
06-08
在 Vue CLI 2.x 中，你可以在项目根目录下创建多个环境变量文件来实现不同环境使用不同的变量值。例如： - `.env`: 默认的环境变量文件，被所有的环境共享。 - `.env.local`: 本地环境变量文件，会覆盖共享的环境变量。 - `.env.[mode]`: 与指定模式相匹配的环境变量文件，例如 `.env.development` 文件只会被 `npm run dev` 命令使用。 在这些文件中，你可以定义一些变量，如： ``` VUE_APP_API_URL=http://localhost:3000 ``` 其中 `VUE_APP_` 前缀是必须的，用于让 Vue CLI 将这些变量注入到应用程序中。你可以在代码中使用 `process.env.VUE_APP_API_URL` 来访问这个变量的值。 在不同的环境中，你可以使用不同的变量值，例如： - 在 `development` 环境中，你可以在 `.env.development` 文件中定义变量的值，例如 `VUE_APP_API_URL=http://localhost:3000`。 - 在 `production` 环境中，你可以在 `.env.production` 文件中定义变量的值，例如 `VUE_APP_API_URL=https://api.example.com`。 在 `npm run` 命令中，你可以使用 `--mode` 命令来指定环境模式，例如 `npm run dev -- --mode development`。在这种情况下，Vue CLI 将会使用 `.env.development` 文件中定义的变量值。 如果你想在代码中访问非 `VUE_APP_` 前缀的环境变量，可以使用 `process.env` 对象来访问，例如 `process.env.NODE_ENV`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值