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. Java Lamada

    Collection: ->stream:返回一个以 colleciotn 元素为数据源的数据流. -->map: 入参 Function 对象,将此流中的元素依次作用于传入的 Funct ...

  2. 《C# 6.0 本质论》 - 学习笔记

    <C# 6.0 本质论> ========== ========== ==========[作者] (美) Mark Michaelis (美) Eric Lippert[译者] (中) ...

  3. P5727 【深基5.例3】冰雹猜想

    链接:Miku -------------------- 欸,为什么我第一遍没过 -------------------- #include<iostream> using namespa ...

  4. Django3的安装以及web项目的创建

    cmd 直接输入:pip install -i https://pypi.douban.com/simple django 2.检测是否安装成功:用到的命令:import  django  ,检测版本 ...

  5. 修改PR Cs6,PS Cs6,AU Cs6的启动界面

    转载来源:https://jingyan.baidu.com/article/09ea3ede00aeedc0aede39ca.html 百度了很多,只见PS Cs6的启动界面修改教程,PR,AU C ...

  6. idea 工具 听课笔记 首页

    maven 创建 javaWeb站点结构标准及异常权限调整 解决Intellij Idea下修改jsp页面不自动更新(链接 idea中使用github  提交 idea 从github.com上恢复站 ...

  7. 学习使用add()()()迭代调用,柯里化处理

    将多个参数的函数,转换成单参数函数链 以add()()()举例 function add(){ 使用数组保存参数 let _args = Array.prototype.slice.call(argu ...

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

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

  9. Verilog-同步FIFO

    参考博客:https://blog.csdn.net/hengzo/article/details/49683707 1.基本框图 1)双端口RAM加两个读写指针 2)写数据.写使能.写满:读数据.读 ...

  10. Mac 配置本地SSL

    1,执行: && openssl req -new -sha256 -x509 -days -key server.key -out server.crt 2,生成过程中,其它可随便填 ...