背景描述:

项目打包后,如果想更换接口域名或者项目名称,就需要再次打包。但是这样子操作有点耗费时间。
如果把这些配置写到一个文件中,然后在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项目打包后,自由修改配置如接口地址等的更多相关文章

  1. vue项目打包后运行报错400如何解决

    昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...

  2. vue项目打包后想发布在apache www/vue 目录下

    使用的是vue-element-admin做示例,可以参考Vue项目根据不同运行环境打包项目,其他项目应该大同小异. 使用vue-router的browserHistory模式,配置mode: 'hi ...

  3. Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...

  4. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  5. vue项目打包后在IE浏览器报错,页面显示空白

    之前写一个项目,一直放在谷歌浏览器调试测试,到尾声时放到IE浏览器结果直接白屏,页面打不开 找了网上的方法,加了babel-polyfill插件后还是不行,后来排查发现是打包插件出了问题,因为用的项目 ...

  6. vue项目打包上线时的配置操作

    vue的图片路径,和背景图片路径打包后错误解决 2017-12-11 16:00 by muamaker, 7037 阅读, 0 评论, 收藏, 编辑 最近在研究vue,老实的按照官网提供的,搭建的了 ...

  7. vue项目打包后的资源路径问题

    最近做的vue项目,本地测试完成后,build上线,却发现了文件路径问题,提示各种诸如js,css等资源找不到的错: 正确解决方式有两种,一种是绝对路径配置,详细可以网上查,个人推荐第二种相对路径,这 ...

  8. vue项目打包后一片空白及资源引入的路径报错解决办法

    网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bu ...

  9. vue项目打包后css背景图路径不对的问题

    问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...

  10. vue项目打包后路径出错

    安装完vue后搭建了一个项目,直接执行 npm run dev 是可以正常打开页面的: 但是执行 npm run build 打包项目后打开却报错了,如下: 原来是项目中的静态文件路径报错了... 然 ...

随机推荐

  1. 钓鱼攻击之:WEB 钓鱼

    郑重声明: 本笔记编写目的只用于安全知识提升,并与更多人共享安全知识,切勿使用笔记中的技术进行违法活动,利用笔记中的技术造成的后果与作者本人无关.倡导维护网络安全人人有责,共同维护网络文明和谐. 钓鱼 ...

  2. NSDT可编程3D场景

    推荐:将 NSDT场景编辑器 加入你的3D开发工具链. NSDT编辑器简化了WebGL 3D应用的开发,完全兼容Three.JS生态.本文介绍如何在自己的应用中嵌入使用NSDT编辑器搭建的3D场景,并 ...

  3. Nextcloud的一些错误提示

    Nextcloud的一些错误提示 PHP 内存限制低于建议值 512MB 您可以通过以下步骤增加PHP内存限制: 打开php.ini文件 在终端中输入以下命令打开php.ini文件: bash sud ...

  4. 17.SpringCloud Alibaba-OSS

    开通阿里云OSS https://www.aliyun.com/product/oss?spm=5176.19720258.J_3207526240.32.e93976f4xq6CZt 创建Bucke ...

  5. 【python学习】PyQt基础学习以及一个信息论与编码课设实例

    这学期的信息论与编码的课设需要用编程语言实现霍夫曼.费诺以及香农编码,要具备在windows下的可视化操作界面,因此就选用PyQt作为开发工具,本篇博客记录一下PyQt的基础以及课设的实例 参考: & ...

  6. 06 RDD编程

    总共有多少学生?map(), distinct(), count() 开设了多少门课程? 每个学生选修了多少门课?map(), countByKey() 每门课程有多少个学生选?map(), coun ...

  7. 【剑指Offer】【链表】复杂链表的复制

    题目:输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否则判 ...

  8. fiddler的界面详细讲解

    一.fiddler首页概述

  9. stm32 出入栈

    Start.S 一般指定栈顶指针及栈大小 1.硬件中断 有硬件入栈和软件入栈部分 硬件入栈寄存器:   R0,R1,R2,R3,R12,PSR 软件入栈寄存器:   r4 - r11 2.程序切换入栈 ...

  10. Codeforces 1132E(大数据多重背包)

    题目链接 题意 给定背包容量$w$,体积分别为$1$到$8$的物体的数量求不超过背包容量的最大体积 思路 考虑将答案转化成$840 * x + y$的形式其中$840 = lcm(1-8), y &l ...