【无标题】vue2 配置多环境

于 2024-06-12 17:17:54 发布
阅读量206 收藏
点赞数 2
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43157372/article/details/139631965
版权

vue2 配置多环境：
1、比如我现在需要在原有得开发和线上环境中添加 特殊得联通和测试环境，那么我们需要在根目录".env.development"同级添加 “.env.liantong"和”.env.test"两个.dev文件、这些文件内部就是存放我们对应得环境变量和设置
在这里插入图片描述
2、当添加完env文件后 我们需要去package.json中添加对应环境的启动以及打包命令，参照下图
在这里插入图片描述
3、这样当我们使用npm run liantong 命令之后我们代码编译之后使用的就是.env.liantong内部的环境变量了，

在这里插入图片描述
这样我们就是特别方便的快速切换不同的环境进行开发和部署

茉希
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2.0多环境打包配置记录
qq_41944038的博客
04-23 478
主要记录vue不同打包命令下的配置
vue2 多环境配置开发
weixin_43858276的博客
04-11 505
打印 process.env.NODE_ENV 测试下没问题就ok了。
VUE配置多开发环境/静态配置文件修改地址
lranqi的博客
07-26 3483
在vue-cli中可以使用.env文件配置不同的开发环境，切换不同部署地址。NODE_ENV='production'VUE_APP_BASE_API='/api'.配置开发环境代理,为每一个接口地址加上的/api前缀，这里再通过配置开发环境代理设置代理地址并重写URL。devServer: {proxy:{}}使用window对象，通过外部配置文件显示修改请求。可以在 window 对象上存储数据或属性，并在整个页面中访问它们。
vue配置多环境
pscool的博客
06-02 778
启动开发环境，打印如下。
vue2通过.env进行多环境配置
weixin_45966674的博客
09-11 1189
我们可以在其他文件中通过 process.env.VUE_APP_API_URL 在js逻辑中拿到 VUE_APP_API_URL配置文件的。然后 我们在项目根目录创建四个文件 分别叫 .env.dev .env.test .env.production。然后 这里我们来个 npm run build:dev 进行 开发环境打包。然后我们打开 package.json 看到原本的打包命令是这样的。然后我们执行 vue create 项目名 创建一个vue项目。
Vue 多环境的配置
个人学习使用
06-26 4680
首先 我们得了解 什么是多环境变量，以及多环境变量的作用，下面用一句简短的话来描述环境一般分为开发环境，测试环境，生产环境作用：文件创建的位置 根目录下 开发环境 配置生产环境来到控制台 启动命令吧 下面我将演示 启动开发环境的指令 其他环境类似为了方便测试 我们来到 main.ts 文件中 输出当前的环境 你们的可能是js 不影响大局.........
vue配置多环境方案
ZT_KEBEI的博客
09-13 530
vue配置多环境方案，开发环境下配置跨域代理，测试环境与生产环境打包。
vue 多环境文件配置（开发，测试，生产）
weixin_43907110的博客
09-21 515
1.经常我们在开发时候会有不同环境，要代理的路由等等都会出现不同。配置一下三个文件打包的时候，执行三个不同的指令就会打包不同的环境。package.json 中配置scripts 指令。以,env.development 为例子。
vue2不同版本下如何分环境打包
剑雪封喉
10-18 1209
vue2不同版本下如何分环境打包
vue配置多个运行环境、打包环境，通过运行指令切换环境，通过切换环境控制对应环境的参数
mrliucx的博客
04-29 6661
01.配置环境 1.创建开发环境、测试环境、生产环境文件 2.给文件配置接口基础API，添加对应环境的所需参数，以生产环境为例 02.静态参数值跟随环境变化 1.环境配置文件中添加了两个参数（代理、websocket） #开发环境nginx代理路径 VUE_APP_BASE_URL = 'manage-web-dev' #开发环境websocket VUE_APP_WEBSOCKET = '192.168.xx.xx:8080' 2.添加的环境参数为VUE_APP_BASE_URL、VUE_APP_
【Vue2 & Vue3】多环境配置（多域名打包）
sanlingwu的博客
04-14 4471
近期同时接触了多个vue项目，经常在2和3中来回切换，同一种需求的实现方式往往不太一样，这里记录一下面对多域名打包的需求时，2和3分别是如何操作的。 需求描述： 同一套代码私有化部署，要部署在多个服务器上，或者是测试服务器与生产服务器不同，即访问服务接口域名不同，通过配置实现多环境的打包。 Vue2： 整体思路：修改配置文件，通过获取命令行的传参定义不同的全局变量。 1.项目中/config/dev.env.js修改： 新增：HOST: '"dev"' 'use strict' const
VUE项目使用.env配置多种环境以及如何加载环境
最新发布
CVPR收割机的博客
04-19 3613
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.x和vue3.x 环境相关配置
青春正在燃烧的博客
12-01 677
vue配置多环境，vue2和vue3根据环境加载js文件
Vue 多环境变量的配置
努力
08-26 2179
为什么配置多环境变量呢？ 在我们开发的过程中，会有多个不同的访问环境比如：开发环境 、 生产环境 等等。在每一种环境下所需要访问的域名都是不一样的，所以可以通过配置多环境变量来解决这一问题。 一、在Vue中首先找到 package.json 文件 二、找到文件中的scripts添加新的配置 "scripts":{ "serve":"vue-cli-serviceserve--open", //npm run serve 启动项目 ......
vue2开发环境与正式环境配置
u012858643的博客
05-15 910
1、首先添加两个文件，一个是正式环境的，一个开发环境的（我所在的公司项目只有两个环境，测试环境和正式环境，所以开发环境其实也就是测试环境的。2、.env.development 文件的内容，属性必须以VUE_APP_开头。.env.production 文件的内容，属性必须以VUE_APP_开头。地址），文件名最好直接复制，避免敲错排查问题会浪费开发时间。3、request中使用，process.env 是全局的。4、package.json中配置。
Vue多环境配置
小强崽的博客
07-17 1787
一、新建配置 # 开发环境 .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项目多环境配置
qq_39183887的博客
11-09 1423
最近在学习vue3 记录一下vue多环境配置的步骤
多环境配置vue.config.js vue2
weixin_45799001的博客
06-01 711
vue.config.js 文件 package.json 上面对应的文件新建，dev，build，uat，prod .dev 配置 .uat 配置 prod 配置如上 request.js
vue2 配置cordova环境
05-05
要在 Vue 2 中配置 Cordova 环境，你需要按照以下步骤进行操作： 1. 安装 Cordova 首先，你需要在本地计算机上安装 Cordova。你可以使用以下命令在终端中安装 Cordova： ``` npm install -g cordova ``` 2. 创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值