vue配置开发,测试,生产环境api
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的更多相关文章
- 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 对应开发环境 使用 ...
- vue-cli生成的项目配置开发和生产环境不同的接口
vue-cli生成的项目,vue项目配置了不同开发环境的接口地址,axios.defaults.baseURL如何引用这个地址,这是在我发布项目的时候考虑的,于是想到了 方法一: config下配置文 ...
- dev stg prd 开发 测试 生产环境
dev development 开发环境stg stage 测试环境prd product 线上环境
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
转载地址: https://blog.csdn.net/gebitan505/article/details/58166055 VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址 前 ...
- spring boot--日志、开发和生产环境切换、自定义配置(环境变量)
Spring Boot日志常用配置: # 日志输出的地址:Spring Boot默认并没有进行文件输出,只在控制台中进行了打印 logging.file=/home/zhou # 日志级别 debug ...
- webpack根据开发与生产环境配置不同变量--webpack.DefinePlugin
webpack有一个DefinePlugin接口,可以实现根据开发与生产环境配置不同变量.范例如下: 需求:开发环境请求baseUrl = '':生产环境请求 baseUrl = 'http://lo ...
- 修改vue的配置项支持生产环境下二级目录访问的方法
本文主要记录如何配置vue的打包文件配置项,使打包后的文件可以支持二级目录的访问. 1.常规打包 在实际的项目中,我们通常都使用 npm run build 直接打包文件后丢到服务器上访问 打包后的文 ...
- linux虚机配置开发/Server环境全集
linux虚机配置开发/Server环境全集 9. centos 升级githttp://www.cnblogs.com/grimm/p/5368777.htmla. 下载git2.2.1并将git添 ...
- JPush Android 推送如何区分开发、生产环境
我们 Android 开发者在使用极光推送时可能会发现,在通过官方控制台进行推送时.只有 iOS 区分了开发和生产环境,而 Android 则没有.但实际开发中又确实经常需要针对开发和生产环境分别来推 ...
- Node JS后端项目开发与生产环境总结
原文地址:Node JS后端项目开发与生产环境总结 Node JS常用后端框架有express.koa.sails.国产框架有个egg js,已经在cnode投入生产了,还有个think js,类似t ...
随机推荐
- Java Lamada
Collection: ->stream:返回一个以 colleciotn 元素为数据源的数据流. -->map: 入参 Function 对象,将此流中的元素依次作用于传入的 Funct ...
- 《C# 6.0 本质论》 - 学习笔记
<C# 6.0 本质论> ========== ========== ==========[作者] (美) Mark Michaelis (美) Eric Lippert[译者] (中) ...
- P5727 【深基5.例3】冰雹猜想
链接:Miku -------------------- 欸,为什么我第一遍没过 -------------------- #include<iostream> using namespa ...
- Django3的安装以及web项目的创建
cmd 直接输入:pip install -i https://pypi.douban.com/simple django 2.检测是否安装成功:用到的命令:import django ,检测版本 ...
- 修改PR Cs6,PS Cs6,AU Cs6的启动界面
转载来源:https://jingyan.baidu.com/article/09ea3ede00aeedc0aede39ca.html 百度了很多,只见PS Cs6的启动界面修改教程,PR,AU C ...
- idea 工具 听课笔记 首页
maven 创建 javaWeb站点结构标准及异常权限调整 解决Intellij Idea下修改jsp页面不自动更新(链接 idea中使用github 提交 idea 从github.com上恢复站 ...
- 学习使用add()()()迭代调用,柯里化处理
将多个参数的函数,转换成单参数函数链 以add()()()举例 function add(){ 使用数组保存参数 let _args = Array.prototype.slice.call(argu ...
- 破解“低代码”的4大误区,拥抱低门槛高效率的软件开发新选择 ZT
最近,每个人似乎都在谈论“低代码”.以美国的Outsystems.Kinvey,以及国内的活字格为代表的低代码开发平台,正在风靡整个IT世界.毕竟,能够以最少的编码快速开发应用的想法本身就很吸引人.但 ...
- Verilog-同步FIFO
参考博客:https://blog.csdn.net/hengzo/article/details/49683707 1.基本框图 1)双端口RAM加两个读写指针 2)写数据.写使能.写满:读数据.读 ...
- Mac 配置本地SSL
1,执行: && openssl req -new -sha256 -x509 -days -key server.key -out server.crt 2,生成过程中,其它可随便填 ...