vue项目动态配置网站图标

1、在.env中配置图标地址

# 网站图标
VUE_APP_ICON_URL = './民政.png'
1
2

2、在main.js中将配置的图标地址存入缓存

if(process.env.VUE_APP_ICON_URL){
  sessionStorage.setItem('VUE_APP_ICON_URL', process.env.VUE_APP_ICON_URL);
}else{
  sessionStorage.setItem('VUE_APP_ICON_URL', null);
}
1
2
3
4
5

3、在index.html页面使用缓存中存储的图标地址

<link id="titleImg" rel="icon" href="<%= BASE_URL %>默认图标.png" />
1

<script>
  // 获取 link 元素
  var linkElement = document.getElementById("titleImg");
  // 使用 JavaScript 设置 href 属性的值
  if (sessionStorage.getItem("VUE_APP_ICON_URL") != "null") {
    linkElement.href = sessionStorage.getItem("VUE_APP_ICON_URL");
  }
</script>
1
2
3
4
5
6
7
8