vue配置文件不打包

开发过程中经常需要修改后台接口地址，如果将接口地址放进打包文件中，不便于后台人员上传项目时随时修改接口地址。
本文主要是解决前后台能方便及时的修改后台接口。

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

var ApiUrl ;
if(location.hostname==='localhost'){  //前端本地测试ApiUrl = 'http://10.5.6.51:8080'
}else if(location.host==='10.5.6.52:1080'){  //线上发布地址ApiUrl = 'http://10.5.6.59:18080'
}export {ApiUrl
}

2.在mian.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.打包后的文件目录如下：

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

如果项目中有其他配置不想放入打包文件中，可以直接在config.js中进行添加。

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

vue配置文件不打包相关推荐

vue 配置文件不打包
1.vue-cli3之后要加载本地js资源,可以将js文件放在public文件下,即与index.html文件同级(可以创文件夹放文件夹中,比较规范) 2.在index文件中引入(注意一定要写入bod ...
vue ---- 将项目打包发布
配置webpack 的打包发布在 package.json 文件的 scripts 节点下,新增build命令如下: "scripts": {"dev": & ...
vue项目构建打包发布三部曲
一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了 2.安装脚手架此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的 ...
vue.js 项目打包APP应用包
vue.js 项目打包APP应用在hbuilderx编辑器使用的,vue.js 项目打包APP应用创建一个vue.js项目,写好移动端 vue.js 框架,APP项目完成. 1.在config配置 ...
Vue、React打包文件放在服务器，浏览器存在缓存问题的解决
Vue.React打包文件放在服务器,浏览器存在缓存问题的解决参考文章: (1)Vue.React打包文件放在服务器,浏览器存在缓存问题的解决 (2)https://www.cnblogs.com/ ...
nginx配置解决vue单页面打包文件大，首次加载慢的问题
nginx配置解决vue单页面打包文件大,首次加载慢的问题参考文章: (1)nginx配置解决vue单页面打包文件大,首次加载慢的问题 (2)https://www.cnblogs.com/golo ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
【sprinb-boot】配置文件分离打包
前言 springboot 2.0.0.RELEASE maven 3.5.0 使用maven命令mvn package打包spring boot项目时,将配置文件分离出来. pom.xml配置 &l ...
Vue开启Gzip打包异常：webpack打包报错Cannot read property ‘emit‘ of undefined
Vue开启Gzip打包异常:webpack打包报错Cannot read property 'emit' of undefined 相关代码 const CompressionPlugin = req ...

vue配置文件不打包

vue配置文件不打包相关推荐

最新文章

热门文章