Vue打包动态配置url等

春暖了花会开

于 2024-09-23 16:57:19 发布

阅读量734

点赞数 12

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_57360663/article/details/142462420

版权

在Vue打包上线服务器之后，若发现请求路径等写错了，又得重新打包发布，非常麻烦。那如何动态配置呢？

1、在public文件夹下新建文件config.js文件，在这个文件夹下的文件，会包含在打包出来的文件夹中，不会被打包。

window.ipConfigUrl = {
    developmentURL:"http://1111111",
    baseURL:"http://2222222",
    dataViewUrl:"http://3333333"
}
//我这里随便填写路径，你们将其替换成想要请求的路径
ipConfigUrl以及后面的baseURL只是个参数名，都可以替换成你们想要的，后面引入即可

2、引用

//直接在文件中引用window.ipConfigUrl.baseURL，就是上一步自定义的参数
axios.defaults.baseURL = window.ipConfigUrl.baseURL

3、在index.html文件中动态地在页面中插入一个<script>标签，在body中添加

  <script type="text/javascript">
    document.write("<script src='./config.js?v=" + new Date().getTime() + "'><\/script>");
  </script>

document.write()这是一个 JavaScript 函数，用于向当前文档中写入 HTML 内容。
"<script src='./config.js?v=" + new Date().getTime() + "'><\/script>"：这是一个字符串，其中包含了一个 <script> 标签。
config.js就是刚刚新建的文件，new Date().getTime()用于生成当前时间的时间戳，避免浏览器缓存旧版本的config.js文件