npm run build 调用开发环境接口,打包开发环境
npm run build:test 调用测试环境接口,打包测试环境
npm run build:prod 调用生产环境接口,打包生产环境

vue项目用vue-cli脚手架安装完成之后,生成的项目中会有build,config这两个文件夹

1、在build文件下新建webpack.test.conf.js

build文件下新建webpack.test.conf.js,将webpack.prod.conf.js内容复制过来。
修改webpack.test.conf.js文件
const env = require('../config/prod.env');
修改为:const env = require('../config/test.env');

2、在config文件下新建test.env.js

config文件下新建test.env.js,将prod.env.js内容复制过来;
分别在dev.env.js,test.env.js,prod.env.js中定义变量API_ROOT,
dev.env.js

test.env.js

prod.env.js

3、在build文件下新建test.js

把build.js 内容复制到test.js

const webpackConfig = require('./webpack.prod.conf')

修改为:

const webpackConfig = require('./webpack.test.conf')

4、修改package.json

配置axios请求的时候,接口地址直接调用 process.env.API_ROOT 就好了,

打包的时候执行 npm run build:test就是调用的测试接口地址

vue配置开发,测试,生产环境api的更多相关文章

  1. https://www.cnblogs.com/beileixinqing/p/7724779.html vue-cli生成的项目配置开发和生产环境不同的接口 vue-cli生成的项目,vue项目配置了不同开发环境的接口地址,axios.defaults.baseURL如何引用这个地址,这是在我发布项目的时候考虑的,于是想到了

    方法二:(集热心网友提供的方案) 一般项目webpack会有两个或多个配置文件,如: webpack.prod.conf.js 对应线上打包 webpack.dev.conf.js 对应开发环境 使用 ...

  2. vue-cli生成的项目配置开发和生产环境不同的接口

    vue-cli生成的项目,vue项目配置了不同开发环境的接口地址,axios.defaults.baseURL如何引用这个地址,这是在我发布项目的时候考虑的,于是想到了 方法一: config下配置文 ...

  3. dev stg prd 开发 测试 生产环境

    dev development 开发环境stg stage 测试环境prd product 线上环境

  4. VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址

    转载地址: https://blog.csdn.net/gebitan505/article/details/58166055 VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址 前 ...

  5. spring boot--日志、开发和生产环境切换、自定义配置(环境变量)

    Spring Boot日志常用配置: # 日志输出的地址:Spring Boot默认并没有进行文件输出,只在控制台中进行了打印 logging.file=/home/zhou # 日志级别 debug ...

  6. webpack根据开发与生产环境配置不同变量--webpack.DefinePlugin

    webpack有一个DefinePlugin接口,可以实现根据开发与生产环境配置不同变量.范例如下: 需求:开发环境请求baseUrl = '':生产环境请求 baseUrl = 'http://lo ...

  7. 修改vue的配置项支持生产环境下二级目录访问的方法

    本文主要记录如何配置vue的打包文件配置项,使打包后的文件可以支持二级目录的访问. 1.常规打包 在实际的项目中,我们通常都使用 npm run build 直接打包文件后丢到服务器上访问 打包后的文 ...

  8. linux虚机配置开发/Server环境全集

    linux虚机配置开发/Server环境全集 9. centos 升级githttp://www.cnblogs.com/grimm/p/5368777.htmla. 下载git2.2.1并将git添 ...

  9. JPush Android 推送如何区分开发、生产环境

    我们 Android 开发者在使用极光推送时可能会发现,在通过官方控制台进行推送时.只有 iOS 区分了开发和生产环境,而 Android 则没有.但实际开发中又确实经常需要针对开发和生产环境分别来推 ...

  10. Node JS后端项目开发与生产环境总结

    原文地址:Node JS后端项目开发与生产环境总结 Node JS常用后端框架有express.koa.sails.国产框架有个egg js,已经在cnode投入生产了,还有个think js,类似t ...

随机推荐

  1. 11种常用css样式之开篇文本字体学习

    常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏 文本:1.letter-spaci ...

  2. 编译Qualcomm的Hexagon exampls错误

    在下载了Qualcomm的Hexagon SDK 351版本之后,想跑里面的examples,然后参照文档的说,比如在examples/common/sobel3x3_v60目录下面,先执行了SDK根 ...

  3. 《Git 从入门到体系》- 写给自己的话

    我听过的对我很有冲击力的观点是:知识不成体系就是垃圾.这个观点不一定对,但是却是给我的冲击很大. 我记得以前在咖啡馆和一个博士医生聊天,他提出了这个观点:知识不成体系就是垃圾.听了这个观点我很想反驳他 ...

  4. Kubernetes 部署 Nebula 图数据库集群

    Kubernetes 是什么 Kubernetes 是一个开源的,用于管理云平台中多个主机上的容器化的应用,Kubernetes 的目标是让部署容器化的应用简单并且高效,Kubernetes 提供了应 ...

  5. C#设计模式学习笔记:(8)装饰模式

    本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7723225.html,记录一下学习过程以备后续查用. 一.引言 今天我们要讲结构型设计模式的第三个模式--装 ...

  6. VMvare桥接网络连接不上解决办法

    记一次学习中的突发状况.由于本人的pc时长要在不同的网络中进行切换,ip地址一般都是不固定的,所以我使用虚拟机的时候一般使用的都是让VMvare自动识别网络环境.直到今天遇到一种突发情况,VMvare ...

  7. 破解“低代码”的4大误区,拥抱低门槛高效率的软件开发新选择 ZT

    最近,每个人似乎都在谈论“低代码”.以美国的Outsystems.Kinvey,以及国内的活字格为代表的低代码开发平台,正在风靡整个IT世界.毕竟,能够以最少的编码快速开发应用的想法本身就很吸引人.但 ...

  8. intellji IDEA 2019版激活码(亲测可用 2019年10月14日08:53:54)

    MNQ043JMTU-eyJsaWNlbnNlSWQiOiJNTlEwNDNKTVRVIiwibGljZW5zZWVOYW1lIjoiR1VPIEJJTiIsImFzc2lnbmVlTmFtZSI6I ...

  9. 【46】谷歌 Inception 网络简介Inception(2)

    Inception 网络(Inception network) 在上节笔记中,你已经见到了所有的Inception网络基础模块.在本节笔记中,我们将学习如何将这些模块组合起来,构筑你自己的Incept ...

  10. [Python机器学习]鸢尾花分类 机器学习应用

    1.问题简述 假设有一名植物学爱好者对她发现的鸢尾花的品种很感兴趣.她收集了每朵鸢尾花的一些测量数据: 花瓣的长度和宽度以及花萼的长度和宽度,所有测量结果的单位都是厘米. 她还有一些鸢尾花的测量数据, ...