用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. Hystrix容错监控机制

    六:Hystrix容错监控机制 什么是微服务的容错机制 提前预设解决方案.,系统自主调节,遇到问题即时处理 什么是Hystrix Netfix 设计原则: 服务隔离机制 服务降级 熔断机制 提供实时的 ...

  2. javaEE(常用API集合<Collection和Map>)

    javaEE 常用API Object类 public String toString() //打印地址 :类的全类名@内存地址 存在的意义:为了被子类去重写,以便于返回对象的内容信息,而不是地址信息 ...

  3. yaml文件详解

    一.yaml文件详解 前言 Kubernetes 支持 YAML 和 JSON 格式管理资源对象JSON 格式:主要用于 api 接口之间消息的传递YAML 格式:用于配置和管理,YAML 是一种简洁 ...

  4. js的map、filter的用法

    filter() 创建新数组,新数组放指定数组中符合条件的元素,满足条件的留下,是对原数组的过滤. map()    返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,是对原数组的加工,映 ...

  5. Linux:atime、mtime、ctime

    三个时间 Linux 的文件属性中有:访问时间(Access Time).修改时间(Modify Time).改变时间(Change Time): 访问时间(Access Time):对文件进行一次读 ...

  6. LeetCode-2049 统计最高分的结点数

    来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/count-nodes-with-the-highest-score 题目描述 给你一棵根节点为 ...

  7. Day 13 13.3 Cookie与Session

    Cookie 一.什么是cookie? cookie的本质就是一组数据(键值对的形式存在) 是由服务器创建,返回给客户端,最终会保存在客户端浏览器中. 如果客户端保存了cookie,则下次再次访问该服 ...

  8. linux更新cmake(无需删除旧版本)

    旧版本:3.15 新版本:3.22.1 下载新版本 https://cmake.org/files/ 手动下载或使用wget wget https://cmake.org/files/v3.22/cm ...

  9. 四大组件之内容提容者ContentProvider

    参考:Android开发基础之内容提容者ContentProvider Android四大组件 内容提供者是四大组件之一,还记得Android的四大组件吗? 前面我们学习了三大组件了,对吧! 其中有: ...

  10. Java面向对象之什么是面向对象?

    面向过程 & 面向对象 面向过程思想 1.步骤清晰简单,第一步做什么,第二步做什么...... 2.面对过程适合处理一些较为简单的问题 面向对象思想 1.物以类聚,分类的思想模式,思考问题首先 ...