vue3项目动态设置浏览器icon及vite中怎么配置

1. 动态设置浏览器icon

在Vue3项目中，可以使用以下代码动态设置浏览器icon：

// 设置浏览器icon
const setFavicon = (url) => {
  const favicon = document.querySelector('link[rel="icon"]');
  if (favicon) {
    favicon.href = url;
  } else {
    const newFavicon = document.createElement('link');
    newFavicon.rel = 'icon';
    newFavicon.href = url;
    document.head.appendChild(newFavicon);
  }
}

// 调用方法设置icon
setFavicon('/path/to/favicon.ico');

2. Vite中配置浏览器icon

在Vite中配置浏览器icon需要在`vite.config.js`中进行配置，代码如下：

export default {
  // 其他配置...
  build: {
    // 设置浏览器icon
    rollupOptions: {
      output: {
        // 修改favicon地址
        assetFileNames: 'img/[name].[hash].[ext]'
      }
    }
  }
}

在上面的代码中，我们通过`assetFileNames`配置了浏览器icon的路径。这里将浏览器icon保存在了`public/img`目录下，所以在HTML中的引用地址应该为`/img/favicon.ico`。