vue项目打包后,自由修改配置如接口地址等
背景描述:
项目打包后,如果想更换接口域名或者项目名称,就需要再次打包。但是这样子操作有点耗费时间。
如果把这些配置写到一个文件中,然后在index.html文件中引入使用,这样子会大大提高工资效率,节省不少时间。
亲测有效~~
操作流程:
1.先在 vue项目中的 public文件夹中新建一个js文件,例如 config.js
//config.js文件
window.gobalUrl = {
//dev环境
VUE_APP_URL: 'xxxx',
VUE_APP_SOCKET_URL: 'xxx'
//qa环境
// VUE_APP_URL: 'xxxx',
// VUE_APP_SOCKET_URL: 'xxxx'
//prod环境
//VUE_APP_URL: 'xxxx',
//VUE_APP_SOCKET_URL:'xxx'
}
2.然后在index.html文件中引入该文件
<script src="./config.js"></script>
3.页面中使用
例如封装的axios文件中
baseUrl:{
apiUrl: window.gobalUrl.VUE_APP_URL,
websocketUrl: window.gobalUrl.VUE_APP_SOCKET_URL
}
这样子就大功告成了~~
注意:
如需修改接口域名,将项目npm run build打包后,直接打开dist文件,找到config.js文件,然后打开,把对应的环境域名注释打开即可。包上线成功后,刷新浏览器查看验证即可。
参考链接:
https://blog.csdn.net/weixin_45943869/article/details/127632921
https://www.jianshu.com/p/93cdd4f336d9
vue项目打包后,自由修改配置如接口地址等的更多相关文章
- vue项目打包后运行报错400如何解决
昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...
- vue项目打包后想发布在apache www/vue 目录下
使用的是vue-element-admin做示例,可以参考Vue项目根据不同运行环境打包项目,其他项目应该大同小异. 使用vue-router的browserHistory模式,配置mode: 'hi ...
- Vue项目打包后背景图片路径错误
vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...
- vue项目打包后资源相对引用路径的和背景图片路径问题
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...
- vue项目打包后在IE浏览器报错,页面显示空白
之前写一个项目,一直放在谷歌浏览器调试测试,到尾声时放到IE浏览器结果直接白屏,页面打不开 找了网上的方法,加了babel-polyfill插件后还是不行,后来排查发现是打包插件出了问题,因为用的项目 ...
- vue项目打包上线时的配置操作
vue的图片路径,和背景图片路径打包后错误解决 2017-12-11 16:00 by muamaker, 7037 阅读, 0 评论, 收藏, 编辑 最近在研究vue,老实的按照官网提供的,搭建的了 ...
- vue项目打包后的资源路径问题
最近做的vue项目,本地测试完成后,build上线,却发现了文件路径问题,提示各种诸如js,css等资源找不到的错: 正确解决方式有两种,一种是绝对路径配置,详细可以网上查,个人推荐第二种相对路径,这 ...
- vue项目打包后一片空白及资源引入的路径报错解决办法
网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bu ...
- vue项目打包后css背景图路径不对的问题
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
- vue项目打包后路径出错
安装完vue后搭建了一个项目,直接执行 npm run dev 是可以正常打开页面的: 但是执行 npm run build 打包项目后打开却报错了,如下: 原来是项目中的静态文件路径报错了... 然 ...
随机推荐
- cpu功耗排行_常见NAS CPU处理器性能排行榜(简单天梯图)
转载csdn: (35条消息) cpu功耗排行_常见NAS CPU处理器性能排行榜(简单天梯图)_weixin_39618173的博客-CSDN博客
- forEach、for in 、 for of三者的区别
1.for 原始的遍历: 其实除了这三种方法以外还有一种最原始的遍历,自Javascript诞生起就一直用的 就是for循环,它用来遍历数组 var arr = [1,2,3,4] for(var i ...
- js循环判断创建新对象放数组中
原效果 之后效果: <!doctype html> <html lang="en"> <head> <meta charset=" ...
- day06-动态SQL语句
动态SQL语句 1.基本介绍 官方文档 mybatis – MyBatis 3 | 动态 SQL 为什么需要动态SQL? 动态SQL是MyBatis的强大特性之一 使用 JDBC 或其他类似的框架,根 ...
- 解决html2canvas.js和pdf.js导出页面问题
最近在做项目时有这么一个需求,需要将当前html页面导出pdf到本地.由于之前是做过类似的功能的借助了两个插件分别是html2canvas.js和pdf.js,本以为是非常顺利就能完成的,实际在使用过 ...
- curl命令查用操作
curl -o /dev/null -s -w "http_code: %{http_code} http_connect:%{http_connect} content_type:%{co ...
- 【补题】The 2022 SDUT Summer Trials
比赛链接 The 2022 SDUT Summer Trials A. Ginger's number 样例恶臭(恼) 签到题 简单分解因数就会发现要求的就是\(gcd\),直接算即可,时间复杂度\( ...
- Qt控制台输出显示乱码
Qt控制台输出显示乱码 https://jingyan.baidu.com/article/ab69b2709aab0b2ca7189f3d.html
- 堆相关题目-python
栈&队列&哈希表&堆-python https://blog.csdn.net/qq_19446965/article/details/102982047 1.丑数 II 编 ...
- c++练习267题 火柴棒等式
*267题 原题传送门:http://oj.tfls.net/p/267 题解: #include<bits/stdc++.h>using namespace std;int c,m;in ...