vue2+axios在不同的环境打包不同的接口地址
node.js的环境变量
process
process 对象是一个 global (全局变量),提供有关信息,控制当前 Node.js 进程。作为一个对象,它对于 Node.js 应用程序始终是可用的,故无需使用 require(),是存在nodejs中的一个全局变量。
一般有三个环境,一是开发环境,二是测试环境,三是正式环境,每个环境都有一个接口地址。
process.env
process.env属性返回一个包含用户环境信息的对象。依靠这个我们就可以给服务器上打上一个标签。这样的话,我们就能根据不同的环境,做一些配置上的处理。比如开启 sourceMap,后端接口的域名切换等等。
解决环境导致后端接口变换问题,就是利用 process.env.NODE_ENV
这个字段来判断。(process是node全局属性,直接用就行了)
第一种方法:
开发情况下,我们只要在config/index.js里添加代理就可以,
proxyTable: {
'/api':{
target:'http://localhost:8088',
pathRewrite:{
'^/api':'/static/mock' //请求是以api开头的,会被替换成/static/mack
}
}
}
需要注意的是
但是在测试和正式环境下都需要打包,接口地址都会走config/pro.env.js,无法区分这两种环境,所以我们采用不同的打包命令来区分,
首先在 package.json中,加入npm命令
"build": "node build/build.js",
"test": "node build/build.js",
在prod.env.js中
const target = process.env.npm_lifecycle_event;
if (target == 'test') {
//测试
var obj = {
NODE_ENV: '"development"',
//post用当前域名
API_ROOT: '""',
//数据字典
API_ROOT_DICT:'"http://10.99.9.9:8787"',
}
}else {
//线上
var obj = {
NODE_ENV: '"production"',
//post用当前域名
API_ROOT: '""',
//数据字典
API_ROOT_DICT:'"http://10.99.9.36:8787/"',
}
}
module.exports = obj;
/*module.exports = {
NODE_ENV: '"production"',
API_ROOT: 'http://10.99.9.9:8787'
}*/
这样npm run build打包的就是正式环境,npm run test打包的就是测试环境。这样就不用每次打包时修改接口域名地址了。
第二种方法:
在config/prod.env.js文件中通过后缀名区分不同的环境,因为prod.env.js定义的常量可以在全局引用,省去了我们再定义全局变量的步骤。
'use strict'
module.exports = {
NODE_ENV: '"production"',
API_PATH_DEV: “‘http://dev.gomain.com’”,
API_PATH_TEST: “‘http://test.gomain.com:’”,
API_PATH_PROD: “‘http://prod.gomain.com’”
}
在main.js中,引入axios,并根据当前的域名配置axios的baseURL
import axios from 'axios'
if (locatin.hostname === 'localhost') {
axios.defaults.baseURL = process.env.API_PATH_DEV
} else if (locatin.hostname === 'dev.gomain.com') {
axios.defaults.baseURL = process.env.API_PATH_DEV
} else if (locatin.hostname === 'test.gomain.com') {
axios.defaults.baseURL = process.env.API_PATH_TEST
} else if (locatin.hostname === 'prod.gomain.com') {
axios.defaults.baseURL = process.env.API_PATH_PROD
}
配置好axios后,每次执行 npm run build命令都会根据 当前不同的环境而选用不同的域名地址。这样就可以达到只打包一次就能在不同的环境中运行了,
vue2+axios在不同的环境打包不同的接口地址的更多相关文章
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
转载地址: https://blog.csdn.net/gebitan505/article/details/58166055 VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址 前 ...
- vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。
废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...
- VUE 利用webpack 给生产环境和发布环境配置不同的接口地址
第一步,分别设置不同的接口地址 首先,我们分别找到下面的文件: /config/dev.env.js /config/prod.env.js 其实,这两个文件就是针对生产环境和发布环境设置不同参数的文 ...
- Vue项目分环境打包的实现步骤
转:https://blog.csdn.net/xinzi11243094/article/details/80521878 方法一:亲测真的有效 在项目开发中,我们的项目一般分为开发版.测试版.Pr ...
- vue分环境打包配置不同命令
1.安装cross-env (cross-env能跨平台地设置及使用环境变量)cnpm/npm i cross-env -D 2.新建模板 红色的为相关文件 3.配置各个文件 (1)config下 ...
- vue 多环境打包
https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F 模式 模式是 Vue CLI 项目中一个重要的概念.默认情况下, ...
- VUE 如何分环境打包(开发/测试/生产)配置
前言 之前小玲一直处于更新,迭代项目的状态,开发环境.测试环境.生产环境都是前辈配置好的,自己几乎没有配置过,这次做几个新项目时,面临着上线,需要分环境打包配置,于是在网上遨游了一会会,摸索着按照网上 ...
- 总结Vue 第四天:vue-cli(Vue2.0 新手入门 — 从环境搭建到发布)
总结Vue 第四天:vue-cli(Vue2.0 新手入门 - 从环境搭建到发布) 一.Vue CLI----(Vue2.0 新手入门 - 从环境搭建到发布): ■ CLI是Command-Lin ...
- php7+apache2.4 (Windows7下),成功启动。(楼主另外提供了1个php7集成环境打包: http://pan.baidu.com/s/1qXwjpF2 ,如果你只是想了解一下,放在d盘根目录。)
php7正式版已经发布,性能是php5.4的2倍.博主入手php7 新鲜了一把,下面是解决问题之后成功启动php7的记录. ( 电脑必须win7 sp1, .netframework4 ) Windo ...
随机推荐
- Thymeleaf中的&&解析问题
1.问题: 最近使用了新的html模板thymeleaf..在模板里使用js语法时遇到问题,&&不能正确的被解析,使用if(a&&b){}可以通过模板解析,但是浏览器上 ...
- Centos 6\7下yum安装R
在linux下安装软件不如windows方便,在windows下我们一般针对可安装的文件(如R.exe)直接双击运行就可以了.而在linux下我们首先要学会使用安装软件的专门工具如centos下的rp ...
- Ubuntu编译Protobuf(Base tensorflow-12)报错
报错1: dogepool@ubuntu-server:~/dogecoin$ ./autogen.sh./autogen.sh: 50: ./autogen.sh: autoreconf: not ...
- 设计模式---行为变化模式之访问器模式(Visitor)
一:概念 访问者模式,是行为模式之一,它分离对象的数据和行为,使用Visitor模式,可以不修改已有类的情况下,增加新的操作角色和职责. 二:动机 在软件构建的过程中,由于需求的改变,某些类层次结构中 ...
- VMware 无法打开内核设备 \\.\Global\vmx86
无法打开内核设备 \\.\Global\vmx86: 系统找不到指定的文件.你想要在安装 VMware Workstation 前重启吗? vmware 安装完成后,打开现有虚拟系统时,报错. 无法打 ...
- canvas.drawImage()方法详解
首先看html5.js /**@param {Element} img_elem@param {Number} dx_or_sx@param {Number} dy_or_sy@param {Numb ...
- wav音频文件格式解析【个人笔记】(自用)
1. WAV格式 wav是微软开发的一种音频文件格式,注意,wav文件格式是无损音频文件格式,相对于其他音频格式文件数据是没有经过压缩的,通常文件也相对比较大些.. 支持多种音频数字,取样频率和声道, ...
- LeetCode(192. Word Frequency)
192. Word Frequency Write a bash script to calculate the frequency of each word in a text file words ...
- vue中computed和watch
computed 计算属性 能够监听vue数据上的变化,页面上来就执行一次,每改变一次数据就又触发.在操作数据的时候,会派生出另一个事情 1.函数形式 computed:{ listenArr(){ ...
- Silverlight用户无法注册之MySql.Data.dll不一致
本篇博文记录本人解决一个"用户无法注册"的问题的过程 1 问题描述: 用户可以删除:但不能注册,也不能修改权限: 图 1用户注册失败 图 2修改用户权限出错 2 解决过程 1)粗暴 ...