背景描述:

项目打包后,如果想更换接口域名或者项目名称,就需要再次打包。但是这样子操作有点耗费时间。
如果把这些配置写到一个文件中,然后在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. C++练习6 不同参数的传递方式

    当函数的形参是变量时,函数内的操作是只对形参的操作,并不会对实参造成影响 当函数的形参是引用时,在函数内对形参操作的同时也会对实参造成影响 1 #include <iostream> 2 ...

  2. python 中常用可视化工具库

    python 中常用可视化工具库 a.Numpy常用属性及方法 为什么用它:它可以方便的使用数组,矩阵进行计算,包含线性代数.傅里叶变换.随机数生成等大量函数(处理数值型的数组) import num ...

  3. 【CQOI2011】动态逆序对

    分析 近乎裸的 \(cdq\) 分治数点问题 我们考虑一个数被删去,它对删后区间逆序对个数的影响就是减去现存序列中前面比它大的个数再减去现存序列中后面比它小的个数 那么我们考虑如何处理时间限制 既然是 ...

  4. python pip 升级失败解决方法

    今天花了一上午学习python,然后现在在研究做爬虫,结果发现python提示pip需要更高的版本,然后就研究了半天,解决方法如下: 一.检查版本: pip show pip 二.更新版本: pyth ...

  5. xampp修改mysql数据库密码(测试成功)

    转载: http://www.360doc.com/content/17/0608/14/8797027_661063783.shtml ------------------------------- ...

  6. 代码随想录算法训练营day14 | leetcode 层序遍历 226.翻转二叉树 101.对称二叉树 2

    层序遍历 /** * 二叉树的层序遍历 */ class QueueTraverse { /** * 存放一层一层的数据 */ public List<List<Integer>&g ...

  7. pdf地址展示成Swiper轮播方式-复制链接

    1.安装vue-pdf插件,swiper插件.clipboard npm install vue-pdf -snpm install swiper -Snpm install clipborad -S ...

  8. 41.Sentinel

    Feign 整合 Sentinel 依赖 <!--Feign--> <dependency> <groupId>org.springframework.cloud& ...

  9. 将视图直接转换成表的SQL语句

    将视图直接转换成表的SQL语句 sqlserver: select * into tablename from viewname

  10. Windows Python2.7环境 安装paramiko模块(转)

    http://t.zoukankan.com/staffyoung-p-5587450.html 链接,网上大多数都是同一篇文章 Paramiko是用python语言写的一个模块,遵循SSH2协议,支 ...