vue2中配置环境变量

已于 2024-02-04 17:50:26 修改
阅读量574 收藏
点赞数 1
文章标签： vue.js 前端 javascript
于 2024-01-23 16:43:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59297167/article/details/135775366
版权
本文介绍了如何在Vue.js项目中创建不同环境的配置文件（如.env.production），通过VUE_APP或NODE_ENV定义变量，以及在axios请求时的应用。还提及了在package.json中进行相关配置以适应不同的开发和生产环境。
摘要由CSDN通过智能技术生成

1、在项目的根目录下创建不同环境线的文件，env.production  env是不能变的后面的名称可以随便起。

2、在文件中定义变量，开头必须是VUE_APP或者NODE_ENV才有效果

3、在进行axios进行请求的时候使用

4、在package.json中进行如下配置

grtjh203
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
（window）vue2安装+环境配置
luoxinwhu的博客
09-03 2131
前提默认用户已经安装了Nodevue2已经包含了webpack插件，不用单独安装webpack1. 确认Node安装路径 2. 以管理员身份打开cmd命令行窗口，进入到Node的安装路径 3. 输入 npm install -g cnpm --registry=https://registry.npm.taobao.org进行全局安装，这是淘宝的镜像，速度比npm安装更快 检测cnpm是否安装
vue-cli配置环境变量的方法
08-27
Vue-cli 配置环境变量的方法 Vue-cli 是一个基于 Webpack 的项目构建工具，提供了默认的环境变量配置，包括 NODE_ENV 的配置。NODE_ENV 的值会根据开发或生产环境的不同而改变，在开发环境中为 "development"，在...
vue2配置环境变量并且nginx运行成功
请叫我欧皇！的博客
09-12 498
需求：我在vue项目配置了生产环境和开发环境，之后通过proxy代理的方式把地址转发到真实的服务器地址上用于请求接口，之后把项目打包后上传到nginx上，之后接口报错404，但是本地运行是可以访问的，找了很久终于解决了故此记录下
vue2+webpack 和 vite+vue3 配置获取环境变量（补充）
最新发布
qq_45796592的博客
06-24 669
继nginx后内容的补充：vue2+webpack 和 vite+vue3 配置获取环境变量
vue2中配置环境变量的方法
dong123456nbnb的博客
07-25 1137
首先要创键三个文件，分别为.env.development（开发环境） .env.production（生产环境） .env.test（测试环境），跟package.json目录是同级文件。
vue2项目配置环境变量
ding139725的博客
04-18 4158
一、环境变量干啥用的 我们学习它肯定就是要用它，说个最常用的例子吧，我们请求的地址在开发线、测试线、和正式线中，肯定是不一样的所以每次打包之前去改就显得很麻烦，它就是用来干这个的帮我们解决这个问题。废话少说，立马开干 二、配置环境变量 首先我们需要在项目根目录下创建你所需要的环境变量名字为.env.xxxx，前面.env是固定的后面可以自定义，这里我定义了三个 .env.development 开发 .env.test 测试 .env.production 生产 三、定义变量 只有VUE_APP开头的变
vue2项目从0搭建(三):配置环境变量及对应的webpack配置
m0_54741495的博客
11-24 2821
实际业务开发中,一个项目很可能会同时配置好几套环境。比如:常规开发环境,开发测试环境,正式的测试环境,预发测试环境,客户甲的生产环境,客户乙的生产环境,通用生产环境,独立应用环境,微前端环境,大屏专用环境,移动端环境。一女多嫁的实际业务场景,就需要我们进行多样化的环境配置。不同的环境需要有不同的一些标识,也要有一些不同的webpack配置或者资源优化。个人认为这里的知识是十分重要的,因为这里对于工作中实际交付项目或者多客户客制化开发是很重要的。
Vue2配置环境变量
L_yvpeng的博客
03-10 4145
代码开发中我们把代码分成开发模式和生产模式，这两种模式的转换我们称职为环境变量。 接下来带着大家如何去配置和使用这个环境变量 Vue2官网：Vue.js 一、首先我们在项目全局目录下创建两个 .env 文件夹，文件分别为 .env.production 生产模式和 .env.development 开发模式 二、在文件里面我们写入对应的https请求地址 NODE_ENV=development VUE_APP_BASE_URL="http://kumanxuan1.f3322.ne
vue3.0环境变量配置.md
04-08
vue3.0环境变量配置大致思路： 1，创建修改相关配置文件（Ctrl + C V即可） 2，封装 axios（根据配置文件，首先判断当前环境，获取对应环境的数据库地址作为当前环境下的基础地址，**拼接到** axios 里面的 url ） 3...
vue项目环境变量配置的实现方法
12-09
实际开发中，开发环境和生产环境中一些变量是不同的，比如接口地址等等，打包之前需要手动切换。 编译时 新建env.js let baseUrl = ''; if(process.env.NODE_ENV == 'production'){ baseUrl = '...
vue-cli3.0 环境变量与模式配置方法
10-17
总之，Vue CLI 3.0 的环境变量和模式配置提供了强大的灵活性，让开发者能够轻松地在不同环境中切换和管理配置，以适应多样化的开发需求。通过理解和利用这些机制，我们可以确保应用在每个阶段都能得到正确的配置。
Vue2.X环境变量配置及其作用
weixin_44482359的博客
08-16 874
最近在做运维时，遇到了一个要将原有项目重新部署的问题，该项目特殊在需要PC端和移动端相互转换，简单来说就是需要识别访客使用的什么设备来进行访问的，例如如果访客使用手机打开的PC端地址，就会自动跳转至手机端，以此来实现页面的适配效果，这样也就会导致测试环境和生产环境所跳转的地址不同，以此在打包时不能总是进行改代码进行打包部署，就想着通过一种方式来制定在打包时读取特定的配置，因此环境变量就是用来解决这个问题的。...
vue2/3：环境变量与模式
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
03-16 1024
在公司实际中环境变量怎么使用的
vue2.x模式和环境变量
weixin_44915419的博客
03-08 285
模式和环境变量官网链接 一、 VUE模式 development 模式用于 vue-cli-service serve test 模式用于 vue-cli-service test:unit production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e ​ package.json配置运行脚本 "scripts": { "dev": "vue-cli-service serve --mode development",
vue2@vue-cli@3的vue.config.js配置环境变量和配置jquery
19年8月小结
08-06 4274
这个文件配置项是我结合了多个大神的设置和官方文档想出来的即配置了jquery也配置了区分生产环境和开发环境的变量，但是变量还没有试过，项目就被别人接手了，在最后一周里我新开发了另一个模块，周六项目一上线就被通知over了，其实有点冤，但怎么说呢，缘分尽了吧…这两天正好可以进来整理整理写写东西… const webpack = require('webpack'); module.exports =...
vue环境变量配置
weixin_44785498的博客
04-11 1010
vue3.0环境变量配置 根据不同的指令： npm run serve // 搭建本地环境 npm run dev // 生成测试环境文件夹(可自定义为devdist) npm run build // 生成生产环境文件夹(一般默认为dist) 思路： 1，创建修改相关配置文件（Ctrl + C V即可） 2，封装 axios（根据配置文件，首先判断当前环境，获取对应环境的数据库地址作为当前环...
vue2配置环境变量
肥晨开发的学习之路
09-14 303
打包资源 vue-cli-service build --mode //指定环境模式 默认是production;即process.env.NODE_ENV的值是production --dest // 指定打包资源的输出路径 默认是dist
vue项目实际开发的问题及实用技巧分享（四:环境变量配置）
谭少.居然的博客
03-28 564
举个简单的例子吧，本地的vue项目启动了，直接通过“127.0.0.1:端口号”或者“localhost:端口号”来访问，然后我们发布到测试环境通过“http://www.test.com（仅示例）”来访问，然后正式环境访问地址又是“http://www.product.com（仅示例）”。简单理解，不同环境下，使用不同的环境变量，我们就运行不同的环境就是我们的目的，所以需要配置在环境变量里的配置可以是诸如公用的服务器配置、公用接口地址、端口等。那么，什么是.process.env呢？
vue2开发环境与正式环境配置
u012858643的博客
05-15 929
1、首先添加两个文件，一个是正式环境的，一个开发环境的（我所在的公司项目只有两个环境，测试环境和正式环境，所以开发环境其实也就是测试环境的。2、.env.development 文件的内容，属性必须以VUE_APP_开头。.env.production 文件的内容，属性必须以VUE_APP_开头。地址），文件名最好直接复制，避免敲错排查问题会浪费开发时间。3、request中使用，process.env 是全局的。4、package.json中配置。
vue3中怎样配置环境变量
10-10
在Vue 3中，你可以使用`.env`文件来配置环境变量。首先，创建一个`.env`文件，并在其中定义你需要的环境变量。例如，假设你希望定义一个名为`VUE_APP_API_KEY`的环境变量，可以像这样在`.env`文件中设置： ``` VUE_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值