用vue-cli构建的项目通常是采用前后端分离的开发模式,也就是前端与后台完全分离,此时就需要将后台接口地址打包进项目中,但是有的时候需要修改接口地址,为了避免为了修改接口地址而进行修改代码后再重新打包的繁琐,解决呢方法很多,推荐一种最便捷的方法,也是最容易操作的方法,亲测有用!

1.首先我们在public目录下的static文件下建立一个config.js文件,内容如下:

1 window.g = {
2 AXIOS_TIMEOUT: 10000,
3 ApiUrl: 'http://localhost:xxxx/api', // 配置服务器地址,
4 ParentPage: {
5 CrossDomainProxyUrl: '/Home/CrossDomainProxy',
6 BtnsApi: '/api/services/app/Authorization/GetBtns',
7 OrgsApi: '/api/services/app/authorization/GetOrgsByUserId'
8 },
9 }

2.接下来我们在public目录下的index.html这个入口文件里引入该文件(注意路径)

<script type="text/javascript" src="static/config.js"></script>

3.然后就可以在需要的地方随意获取就行了,比如:

var baseURLStr = window.g.ApiUrl
// 创建axios实例
const service = axios.create({
baseURL: baseURLStr, // api的base_url
timeout: 5000 // 请求超时时间
})

4.在打包成功之后,config,js文件不会被打包,依然存在static文件夹下,如果需要修改只需要用记事本打开文件修改地址就OK了,而且该方法也不会影响开发模式,是不是很简单有效呢,快去尝试一下吧:
5.最后再教一个运行打包后的dist静态文件的方法哈,如下:

  测试:安装http-server或者anywhere 搭建web服务器环境(建议使用anywhere)

npm install anywhere -g

6.在打包后的dist文件下打开命令行 输入anywhere,浏览器会自己打开,这时你打包好的项目就相当于在服务器上运行了,这时你再修改static文件下config.json里面的地址,刷新网页,你会发现地址已经更改为你刚改的地址了。

恭喜你又学到了一招半式!!!!!   点个赞再走哈!!

vue webpack打包之后 重新修改配置文件接口API路径,无需修改代码后再打包的更多相关文章

  1. Vue学习笔记-Django REST framework3后端接口API学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  2. Android Studio环境下代码混淆+签名打包

    Android Studio环境下代码混淆+签名打包 作者 Mr_冯先生 关注 2016.08.21 01:10 字数 1040 阅读 734评论 5喜欢 34 注:本文使用的Android Stud ...

  3. Hosts文件路径及修改方法

    (转自:http://www.techolics.com/softdev/20111029_100.html) 什么是Hosts文件? 根据百度百科的定义,Hosts文件是一个系统文件,这是一个本地的 ...

  4. vue打包之后生成一个配置文件修改接口

    前言: 我们的vue代码打包上传到服务器之后, 要是数据接口 以后换了域名什么的,是不是需要重新去vue文件里修改接口. 能不能生成一个配置文件,里面可以配置域名或其它什么字段之类的,这样以后换了域名 ...

  5. 如何做到在webpack打包vue项目后,在外部动态修改配置文件

    在我们做完vue项目后,只需要执行 npm run dist 就可以轻松进行打包转测试,可是如果我们临时需要修改一些配置文件比如域名,这时候我们就有点懵逼了,那就修改了再重新打一次包? NO NO N ...

  6. vue打包之后生成一个配置文件修改请求接口

    问题描述: 在npm run build 生成dist后,url配置也被固定了,传到运行的前端服务器上后,假设某次,api服务器的ip修改了,改动只是更新下这个url,但是却需要回到前端源码,修改ur ...

  7. vue打包之后动态修改请求接口方法

    1.可以根据自身情况封装获取配置文件接口信息 1.1我在static中新建一个config.json配置文件 { "DEV_URL":"/apis",//开发模 ...

  8. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

  9. Vue + webpack 项目配置化、接口请求统一管理

    准备工作 需求由来: 当项目越来越大的时候提高项目运行编译速度.压缩代码体积.项目维护.bug修复......等等成为不得不考虑而且不得不做的问题.  又或者后面其他同事接手你的模块,或者改你的bug ...

  10. 基于Vue + webpack + Vue-cli 实现分环境打包项目

    需求由来:我公司项目上线发布至服务器分为三个环境分别为测试环境.预发布环境.生产环境:前期做法是项目通过脚步打包时由脚步把域名和后缀名之类的全部替换成要发布的环境所需要的,因为我公司的项目比较大由许许 ...

随机推荐

  1. Vue学习:实现用户没有登陆时,访问后自动跳转登录页面

    设计思路 定义路由的时候配置属性,这里使用needLogin标记访问页面是否需要登录 设置路由守卫,每个页面在跳转之前都要经过验证,校验用户信息是否存在,不存在跳转到登录页 用户登录后将用户信息存储在 ...

  2. 【GDKOI 2021提高组DAY2】抄写

    \(\text{Solution}\) \(dp\) 翻折就只需预处理回文中心 \(Manacher\) 预处理即可 \(Code\) #include<cstdio> #include& ...

  3. JZOJ 4895【NOIP2016提高A组集训第16场11.15】三部曲

    题目 对于 \(50%\) 的数据,\(1<=n<=1000,1<=p<=300\) 对于 \(100%\) 的数据,\(1<=n<=50000,1<=p&l ...

  4. python pip 升级失败解决方法

    今天花了一上午学习python,然后现在在研究做爬虫,结果发现python提示pip需要更高的版本,然后就研究了半天,解决方法如下: 一.检查版本: pip show pip 二.更新版本: pyth ...

  5. 跳板攻击之:frp代理转发

    跳板攻击之:frp代理转发 目录 跳板攻击之:frp代理转发 1 frp 介绍 2 frp 原理 3 实验环境 3.1 实验准备 3.2 实验拓扑 4 frp代理socks 5 frp代理stcp安全 ...

  6. obj对象数据归类整理

    两个字段根据id对应整理     <!doctype html> <html lang="en"> <head> <meta charse ...

  7. LeetCode-28 实现strStr() KMP算法的学习

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/repeated-string-match 题目描述 给定两个字符串 a 和 b,寻找重复叠加字符 ...

  8. MySQL Replication(数据同步技术)

                          MySQL Replication(数据同步技术) A 到 B 完成主从复制,意思是数据同步技术 从读取主的二进制日志文件,按照日志中记录对从库进行同样的操 ...

  9. CF1738E Balance Addicts

    个人思路: \(sum_i\) 表示前 \(i\) 个数的前缀和,推一下式子可知是要选若干对 \(l_i,r_i\),使得 \(l_1 < l_2 <\dots < l_k \le ...

  10. 框架和Nginx

    分布式:micorservice.framework. spring security Nginx 方向代理:正向代理就是客户端通过代理访问不同的服务器例如访问外网,反向代理就是客户端直接访问反向代理 ...