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 ...
随机推荐
- TChart-图表的滚动与翻译
界面代码: object Form1: TForm1 Left = Top = Width = Height = Caption = 'Form1' Color = clBtnFace Font.Ch ...
- Android中点击按钮获取string.xml中内容并弹窗提示
场景 AndroidStudio跑起来第一个App时新手遇到的那些坑: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103797 ...
- IIS网站部署配置
1.配置Session State
- xshell/secureCRT连接Linux及其常用命令
一.xshell:在Windows界面下用来访问远端不同系统下的服务器,从而比较好的达到远程控制终端的目的 下载安装后连接步骤: 二.secureCRT:在Windows下登录UNIX或Linux服务 ...
- 并查集find,merge操作
一.find操作 //find操作路径压缩版 inline int find(int x){ if(fa[x]==x) return x; int t=find(fa[x]); fa[x]=t; re ...
- Java与Go语言差异1 传值还是传引用
在Java中,复杂类型(除原始类型外的其它类)作为入参,在方法中被修改后,跳出方法对象内的值仍会保持,也就是传的是引用.原始类型传的是值,如int, double等原始类型. Java代码: publ ...
- cf1012B
题意简述: 给定一个 n×m的矩阵,其中 q 个位置已经被填充. 有一条规则,如果 (r1,c1) ,(r1,c2),(r2,c1) 均被填充,则 (r2,c2) 也被填充.任何被其他三个位置生成的位 ...
- 网络流最大流——dinic算法
前言 网络流问题是一个很深奥的问题,对应也有许多很优秀的算法.但是本文只会讲述dinic算法 最近写了好多网络流的题目,想想看还是写一篇来总结一下网络流和dinic算法以免以后自己忘了... 网络流问 ...
- [51nod 1126] 求递推序列的第N项 - 矩阵乘法
#include <bits/stdc++.h> using namespace std; #define int long long const int mod = 7; struct ...
- spring boot中通用应用程序属性
可以在application.properties文件内部application.yml,文件内部或命令行开关中指定各种属性.本附录提供了常见的Spring Boot属性列表以及对使用它们的基础类的引 ...