webpack+vue打包之后输出配置文件修改接口文件
用vue-cli构建的项目通常是采用前后端分离的开发模式,也就是前端与后台完全分离,此时就需要将后台接口地址打包进项目中,but,难道我们只是改个接口地址也要重新打包吗?当然不行了,那就太麻烦了,怎么解决呢?其实方法很多,接下来我推荐一种最便捷的方法,也是最容易操作的方法。
1.首先我们在static文件下建立一个js文件,就叫config.js吧,内容为
window.g = {
AXIOS_TIMEOUT: 10000,
ApiUrl: 'http://localhost:21021/api/services/app', // 配置服务器地址,
ParentPage: {
CrossDomainProxyUrl: '/Home/CrossDomainProxy',
BtnsApi: '/api/services/app/Authorization/GetBtns',
OrgsApi: '/api/services/app/authorization/GetOrgsByUserId'
},
}
2.接下来我们只需要在index.html这个入口文件里引入该文件(注意路径就ok)
- <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 // 请求超时时间
})
webpack+vue打包之后输出配置文件修改接口文件的更多相关文章
- webpack + vue 打包生成公共配置文件(域名) 方便动态修改
需求原因 原来的项目中域名是打包到项目里面的,打包后不能动态配置,只能通过不同的指令打包来切换域名,每天都在测试域名和正式域名来回摩擦,后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配 ...
- vue打包之后生成一个配置文件修改接口
前言: 我们的vue代码打包上传到服务器之后, 要是数据接口 以后换了域名什么的,是不是需要重新去vue文件里修改接口. 能不能生成一个配置文件,里面可以配置域名或其它什么字段之类的,这样以后换了域名 ...
- vue 打包后app.css,verondor.js文件过大
参考:https://blog.csdn.net/feiyu_may/article/details/80987404 https://blog.csdn.net/qq_4199961 ...
- vue -- vue-cli webpack项目打包后自动压缩成zip文件
用vue2.0开发项目,使用npm run build 命令 ,但是只会生成dist文件夹,以下是生成zip压缩包方法 1,插件安装 webpack插件安装 filemanager-webpack-p ...
- 手动搭建webpack + vue项目之初体验
在使用vue做开发时,大部分人只会使用官方提供的脚手架搭建项目,脚手架虽然很好用,但想要成为一名优秀的前端开发者,webpack这一道坎是绕不开的,所以我们要学会脱离脚手架,利用webpack手动搭建 ...
- vue中打包生成可配置文件以便修改接口地址
vue打包上传到服务器之后,如果数据接口域名发生变化,需要手动修改接口地址,在发布的时候也麻烦,于是.. 在打包之后如果有一个json配置文件以便修改那不是方便很多 在网上找了一些方法貌似都是异步请求 ...
- 16.如何做到webpack打包vue项目后,可以修改配置文件
问题描述: 前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api ...
- vue打包之后生成一个配置文件修改请求接口
问题描述: 在npm run build 生成dist后,url配置也被固定了,传到运行的前端服务器上后,假设某次,api服务器的ip修改了,改动只是更新下这个url,但是却需要回到前端源码,修改ur ...
- vue和webpack打包 项目相对路径修改
一般vue使用webpack打包是整个工程的根目录,但是很多情况下都是把vue打包后的文件在某子目录下. 修改: 1,打开index.js assetsPublicPath:'/' 改为: asset ...
随机推荐
- Hibernate的学习(二)
---恢复内容开始--- 一.多表的建表原则 1.一对多的关系:例如 一个客户有多个联系人: 表与表一对多的关系:在一对多时,多的表中添加一个外键,用来和一的表的主键.产生联系. 2.多对多的关系:例 ...
- 围在栅栏中的爱WriteUp(附QWE密码加解密脚本)
题目的链接:http://www.shiyanbar.com/ctf/1917 1.首先题目给出的是摩尔斯电码: 在下面的网站上解密:https://www.cryptool.org/en/cto-c ...
- EM算法(坐标上升算法)
原文地址:https://www.cnblogs.com/to-creat/p/6075322.html 机器学习十大算法之一:EM算法.能评得上十大之一,让人听起来觉得挺NB的.什么是NB啊,我们一 ...
- 最简单的HashMap底层原理介绍
HashMap 底层原理 1.HashMap底层概述 2.JDK1.7实现方式 3.JDK1.8实现方式 4.关键名词 5.相关问题 1.HashMap底层概述 在JDK1.7中HashMap采用的 ...
- Python备份MySQL数据库【转】
#!/usr/bin/env python # coding: utf- import os import time ''' defined variable ''' databases=['hch' ...
- Efuse--芯片存储
1.Efuse是什么 Efuse类似于EEPROM,是一次性可编程存储器,在芯片出场之前会被写入信息,在一个芯片中,efuse的容量通常很小,一些芯片efuse只有128bit. 2.efuse的作用 ...
- ffmpeg 增加视频流媒体质量评估滤镜 (Video Multimethod Assessment Fusion, VMAF)
URL: https://github.com/Netflix/vmaf libvmaf Obtain the VMAF (Video Multi-Method Assessment Fusion) ...
- Linux下的进程结构
Linux系统是一个多进程的系统,它的进程之间具有并行性.互不干扰等特点.也就是说,每个进程都是一个独立的运行单位,拥有各自的权利和责任.其中,各个进程都运行在独立的虚拟地址空间.因此,即使一个进程发 ...
- Golang -- range小坑铭记
废话少叙,先上一段代码,猜猜预期的效果. package main import ( "fmt" ) type student struct { Name string Age i ...
- mysql5.7 闪回数据(update delete insert)
本次测试用Myflash闪回dml操作,有个前提条件是log_bin开启并且log模式是row: mysql> show global variables like "binlog%& ...