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 打包项目后打开却报错了,如下: 原来是项目中的静态文件路径报错了... 然 ...
随机推荐
- 钓鱼攻击之:WEB 钓鱼
郑重声明: 本笔记编写目的只用于安全知识提升,并与更多人共享安全知识,切勿使用笔记中的技术进行违法活动,利用笔记中的技术造成的后果与作者本人无关.倡导维护网络安全人人有责,共同维护网络文明和谐. 钓鱼 ...
- NSDT可编程3D场景
推荐:将 NSDT场景编辑器 加入你的3D开发工具链. NSDT编辑器简化了WebGL 3D应用的开发,完全兼容Three.JS生态.本文介绍如何在自己的应用中嵌入使用NSDT编辑器搭建的3D场景,并 ...
- Nextcloud的一些错误提示
Nextcloud的一些错误提示 PHP 内存限制低于建议值 512MB 您可以通过以下步骤增加PHP内存限制: 打开php.ini文件 在终端中输入以下命令打开php.ini文件: bash sud ...
- 17.SpringCloud Alibaba-OSS
开通阿里云OSS https://www.aliyun.com/product/oss?spm=5176.19720258.J_3207526240.32.e93976f4xq6CZt 创建Bucke ...
- 【python学习】PyQt基础学习以及一个信息论与编码课设实例
这学期的信息论与编码的课设需要用编程语言实现霍夫曼.费诺以及香农编码,要具备在windows下的可视化操作界面,因此就选用PyQt作为开发工具,本篇博客记录一下PyQt的基础以及课设的实例 参考: & ...
- 06 RDD编程
总共有多少学生?map(), distinct(), count() 开设了多少门课程? 每个学生选修了多少门课?map(), countByKey() 每门课程有多少个学生选?map(), coun ...
- 【剑指Offer】【链表】复杂链表的复制
题目:输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否则判 ...
- fiddler的界面详细讲解
一.fiddler首页概述
- stm32 出入栈
Start.S 一般指定栈顶指针及栈大小 1.硬件中断 有硬件入栈和软件入栈部分 硬件入栈寄存器: R0,R1,R2,R3,R12,PSR 软件入栈寄存器: r4 - r11 2.程序切换入栈 ...
- Codeforces 1132E(大数据多重背包)
题目链接 题意 给定背包容量$w$,体积分别为$1$到$8$的物体的数量求不超过背包容量的最大体积 思路 考虑将答案转化成$840 * x + y$的形式其中$840 = lcm(1-8), y &l ...