vue配置文件不打包

开发过程中经常需要修改后端接口地址，如果将接口地址放进打包文件中，不便于随时修改后端接口地址

1、在static中创建js文件夹，js文件夹中创建 config.js

var ApiUrl ;
if(location.hostname==='localhost'){ //本地环境
ApiUrl = 'http://127.0.0.11:8080'
}else if(location.host==='39.100.134.99'){ //线上环境
ApiUrl = 'http://39.100.134.99:8080'
}

export {
ApiUrl
}

2、在main.js中引入 config.js

import {ApiUrl} from '../static/js/config'
Vue.prototype.baseUrl = ApiUrl;

3、在所有的页面可以直接使用 this.baseUrl 即可。例如：

this.$http.get(this.baseUrl+'/api/v1/apiname').then((res)=>{
}).catch((err)=>{
})

4、打包后的文件目录如下：

image.png

dist文件为打包的文件，static/js/config.js为接口的配置文件

注：此方法的原理是vue不会将static中的文件进行打包，static中的文件属于静态资源