vue项目多环境变量配置

最新推荐文章于 2024-08-30 17:04:02 发布
最新推荐文章于 2024-08-30 17:04:02 发布
阅读量727 收藏 1
点赞数 1
分类专栏： 项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57748960/article/details/117475067
版权
本文介绍了如何在Vue项目中配置多环境变量，包括创建`.env`文件（如`.env.test`, `.env.development`, `.env.production`），规定属性名以`VUE_APP_`开头，并在`package.json`、`vue.config.js`中使用这些变量。通过不同命令（如`npm run serve`, `npm run build`, `npm run test`）加载不同的环境配置。" 45894431,4842405,Unity Playmaker输入系统实战教程,"['Unity开发', '游戏编程', 'Playmaker框架', '游戏逻辑', '交互设计']
摘要由CSDN通过智能技术生成

介绍

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

在项目的根目录(与package.json同级)新建3个文件夹，

".env"文件命名不一定非要development、production、test。是可以自定义的，前提是得在package.json里面做对应的名称修改！(注意命名要语义化方便理解)

  • .env.test 测试环境配置，
  • .env.development 开发环境配置，
  • .env.production 生产环境配置
接下来是不同文件里面的代码情况，

注意：属性名必须以VUE_APP_开头，比如VUE_APP_XXX
.env.test（测试环境配置文件）

NODE_ENV = 'development'//环境标志
VUE_APP_CURRENTMODE = 'development'
VUE_APP_BASEURL <
最低0.47元/天 解锁文章
虞南北
关注
专栏目录
vue配置多环境变量
好好学习，天天向上！
01-04 314
什么是多环境变量 项目在运行时会根据启动的指令来运行不同的环境，在不同的环境中，我们配置对应所需的变量来满足我们的开发需求，称为多环境变量。 环境一般分为开发环境 测试环境 生产环境 配置流程 在项目根目录下的package.json中配置serve test build，通过 --mode xxx 来执行不同环境 "scripts": { "serve": "vue-cli-service serve --open", "test": "vue-cli-service build --mo
多环境变量
m0_62351590的博客
01-03 203
什么是多环境变量？ 项目在运行时会根据启动的指令来运行不同的环境，在不同的环境中，我们配置对应所需的变量来满足我们的开发需求，称为多环境变量。 环境一般分为开发环境，测试环境，生产环境 配置流程 1、在项目根目录下的package.json中配置serve test build，通过 --mode xxx 来执行不同环境 "scripts": { "serve": "vue-cli-service serve --open", "test": "vue-cli-service build --mod
vue3（vite）配置环境变量
weixin_55049839的博客
08-02 1093
一般在开发时候最常用到(development)开发环境、(production)生产环境、(test)测试环境。在vue3根目录创建三个文件，分别为：.env.development 、.env.production 、.env.test
vue项目多环境配置
m0_51328823的博客
12-30 393
多环境变量 多环境变量是在项目开发·打包·生产时产生的概念，所谓的多环境变量指的就是一个项目适配多种环境。 配置启动命令 "scripts": { // npm run serve "serve": "vue-cli-service serve", // npm run build "build": "vue-cli-service build", // npm run test "test": "vue-cli-service build --mode test
Vue 多环境变量的配置
努力
08-26 2226
为什么配置多环境变量呢？ 在我们开发的过程中，会有多个不同的访问环境比如：开发环境 、 生产环境 等等。在每一种环境下所需要访问的域名都是不一样的，所以可以通过配置多环境变量来解决这一问题。 一、在Vue中首先找到 package.json 文件 二、找到文件中的scripts添加新的配置 "scripts":{ "serve":"vue-cli-serviceserve--open", //npm run serve 启动项目 ......
vue配置多环境
pscool的博客
06-02 930
启动开发环境，打印如下。
vue多环境变量配置
weixin_49612239的博客
06-02 799
vue-cli4环境变量配置和代理跨域配置 环境变量配置 跨域代理配置 总结 参考内容 环境变量配置 官方文档 https://cli.vuejs.org/zh/guide/mode-and-env.html#模式 在项目根目录中新建.env, .env.production, .env.pre 等文件 NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用 一个环境文件只包含环境变量的“键=值”对: .env # 在所有的环境中被载入 .en
vue项目环境变量配置的实现方法
12-09
实际开发中，开发环境和生产环境中一些变量是不同的，比如接口地址等等，打包之前需要手动切换。 编译时 新建env.js let baseUrl = ''; if(process.env.NODE_ENV == 'production'){ baseUrl = '...
vue项目使用.env文件配置全局环境变量的方法
10-16
本文将深入探讨在Vue项目中使用.env文件来配置全局环境变量的方法，以及这些环境变量是如何根据不同的启动命令被加载和应用的。 首先，我们来了解什么是.env文件。.env文件是一种环境配置文件，它允许开发者为项目...
vue项目配置环境变量
helloworld963的博客
06-23 4884
需求： 前后端分离的项目中，前端会有很多环境：本地开发，测试环境，预发布环境，正式上线环境等等，我们的项目有3套基本相同的项目，意思是有12个以上环境，当每个环境都需要打包的时候，手动修改配置就很繁琐而且难免出错，比如每个环境对应的服务器地址不同，项目名称不同。 解决： 在根目录下创建.env.xxx文件，例如.env.development,.env.production,.env.staging,.env.51(51是我的服务器标识)等等 里面配置你需要切换的服务器连接地址，其他项目名称，以及打包后的
vue相关配置文件详解及多环境配置详细步骤
11-20
1.package.json 作用： package.json 文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。 文件结构如下： { "name": "sop-vue", "version": "0.1.0", "author": "zhangsan ", "description": "sop-vue", "keywords":["node.js","javascript"], "private": true,
vue-cli3环境变量与分环境打包的方法示例
12-04
第一步 : 了解环境变量概念 我们可以根目录中的下列文件来指定环境变量: .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入，但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略 环境变量文件只包含环境变量的“键=值”对： FOO=bar VUE_APP_SECRET=secret // 只有VUE_APP_开头的环境变量可以在项目代码中直接使用 除了 自定义的VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两
Vue配置多环境变量,原来是这么回事啊
技术前端，忠于热爱 @0.活在风浪里
01-01 2584
环境变量的默认值和自己添加环境变量 在main.js打印console.log(process.env); 会得到两个默认变量分别是BASE_URL:"" 和 NODE_ENV:"development", NODE_ENV:""可以用来区分环境是开发还是测试还是正式环境 如下图 1 .如果想要自己定义添加环境变量需要,在根目录下新建.env文件 以VUE_APP开头,例如:VUE_APP_MY_NAME="活在风浪",注意需要重新启动服务! 1......
[Vue]多系统环境配置
最新发布
qq_45625778的博客
08-30 620
内容可以不放东西，只是作为一个打包渠道文件，你也可以就使用默认的env.production文件，对应默认的build。需要实现一套代码运行与打包多个平台，还能通过dist文件夹内部的config.js文件进行打包配置修改系统与对应后端接口。1.如果你的项目里面没有build文件夹，就创建一个build文件夹下面创建一个index.js文件用来配置preview。3.在src文件夹下创建一个config.js文件，其中defaultConfig配置表示如果全局配置失效的情况下的配置。
Vue多环境配置
小强崽的博客
07-17 1801
一、新建配置 # 开发环境 .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 cli3的多环境配置
hua_hourglass的博客
12-31 649
vue项目开发时，会有不同的运行环境，例如：开发环境、测试环境、生产环境，本文详细介绍一下vue3的环境配置步骤： 在根目录下建三个文件 注意：.env文件中变量命名 必须以 VUE_APP_ 开头 .env.development：开发环境文件 NODE_ENV = 'development' VUE_APP_MODE = 'development' VUE_APP_API_URL ='开发环境接口地址' .env.production：生产环境文件 NODE_ENV = 'production'
VUE项目使用.env配置多种环境以及如何加载环境
CVPR收割机的博客
04-19 5064
build:stage”: “vue-cli-service build --mode staging”，使用npm run build:stage指令时会在 staging 模式下加载可能存在的 .env、.env.staging 和 .env.staging.local 文件，此时NODE_ENV 的值将被覆盖为 production，而不是 staging然后构建出生产环境应用。NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。
vue2配置不同环境打包指令（vue-cli3）
weixin_45606890的博客
12-27 977
vue配置打包指令
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值