vue项目打包后生成一个配置文件可以修改打包后的服务器api地址

问题描述：vue项目打包上线之后，如果要改服务器api地址，只能在源码更改然后重新打包发布，为了解决这个问题，我们可以在static增加一个config.json文件，然后打包的时候它不会被打包，从而在里面修改服务器地址，这样就不用在源码更改。
我觉得这是最简单的办法，不用修改build里面webpack.prod.conf配置文件
1.在static创建config.json文件

以上是需要更改的三个文件

//服务器ip地址
{"ApiUrl":"http://192.168.0.158"}

2.在main.js加入以下代码

//要引入axios才能用
//注意获取config.json的地址
axios.get("./../static/config.json").then((result)=>{console.log(result)//存到localStorage里面，方便在其他页面获取localStorage.setItem('ApiUrl',result.data.ApiUrl);console.log(localStorage.getItem('ApiUrl'));//也可以声明成全局变量,在其他页面用this.ApiUrl获取
//  Vue.prototype.ApiUrl=result.data.ApiUrl
}).catch((error)=>{console.log(error)});

3.在你存放接口的文档api.js获取

console.log(localStorage.getItem('ApiUrl'))
const APIV1 = localStorage.getItem('ApiUrl')+'/api/v1'

或者是在你封装get/post方法的地方直接获取地址

//getapi为自己封装的获取api.js里面的接口地址url: localStorage.getItem('ApiUrl')+getapi(url),

4.运行npm run build，打包好的dist里面的static里面会新增一个config.json文件（这就是我们想要的修改服务器api地址的入口）

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

npm install anywhere -g

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

vue项目打包后生成一个配置文件可以修改打包后的服务器api地址相关推荐

实现打包后修改服务器接口地址,vue打包之后生成一个配置文件修改接口
我们的vue代码打包上传到服务器之后,生成一个配置文件,里面可以配置域名或其它什么字段之类的,这样以后换了域名,只修改这个配置文件即可. 第一步:安装generate-asset-webpack-pl ...
vue 项目中自动生成二维码
vue 项目中自动生成二维码最近在写一个vue项目,要求根据卡号可以自动生成一个二维码,并渲染在指定位置,因为第一次做类似业务,小编在网上找了找,发现了很多,具体起来主要用的就两种: QRc ...
多个vue项目生产环境下NGINX配置文件
多个vue项目生产环境下NGINX配置文件使用场景 1.多个前端项目 2.多个后端项目 3.修改nginx配置后端接口转发路径 4.反向代理某个目录下带特定后缀名的文件 5.vue3项目使用前 ...
vue项目通过Electron生成桌面应用
vue项目通过Electron生成桌面应用一.安装 1. 把electron的官方demo下载下来 2. 安装cnpm 3. npm start 启动electron 4. 修改vue项目 5. 打 ...
搭建vue项目环境以及创建一个简单的vue的demo
一.vue-cli脚手架的搭建步骤 1.首先,确定你的电脑上已经安装了nodejs,可以使用npm包管理器安装环境,如果还没有安装node环境,则需要安装node.js 这个很简单默认点击安装 ...
vue项目中自动生成二维码
vue项目中自动生成二维码我们在做vue项目时,很多时候要用到生成二维码的功能,今天给大家介绍一个有前端生成二维码的小例子: 1.安装vue-qr: npm isntall vue-qr --sav ...
java gradle maven_java – 如何使gradle在maven用户的项目根目录下生成一个有效的pom.xml文件？...
在现在只有两天的时间里,我绝对出售了我所有Java项目的毕业生,并从我所有项目的根目录中删除pom.xml. 然而,我想保持与maven兼容,在某种意义上,我希望一个毕业生的任务能够在用户想要的项目根 ...
vue项目利用uuid生成唯一随机字符串判定临时游客
我们的项目上线后,除了给用户提供登录注册后,使用该网页功能外,还需要提供临时游客身份,除了进行独立数据的存储,还有给用户拥有临时用该网页一些功能的体验,打游戏的童鞋应该知道,有些游戏会提供临时游客身份 ...
vue项目（webpack+mintui），使用hbuilder打包app - 小小人儿大大梦想 - 博客园
一.配置config/index.js 本人没有配置index.js文件,就开始进行了打包,结果最终效果是页面空白,解决了空白,接着底部图标(我是用的阿里巴巴图片)资源找不到.所以配置这步比较重要. ...

vue项目打包后生成一个配置文件可以修改打包后的服务器api地址

vue项目打包后生成一个配置文件可以修改打包后的服务器api地址

vue项目打包后生成一个配置文件可以修改打包后的服务器api地址相关推荐

最新文章

热门文章