There is a need to modify the icon of the tab page of the system in the browser according to the configuration of the system (a system built using Qiankun Micro front-end, which has multiple sub-applications).
The default icon of Vue is this:
BASE_URL is a variable in the process.env environment, the default is the root directory, and the favicon.ico under it is the favicon.ico file next to index.html, which is usually the icon that comes with Vue . 
First of all, I thought of two ideas to deal with the need for dynamically setting icons:
- Set a variable, and modify the variable to dynamically modify the icon
- Directly use the method of obtaining this link node to modify its href attribute
I originally wanted to use the first method to achieve this effect, but found that it is not so simple to dynamically modify system variables. After all, a project is started, and the system variables basically remain unchanged. Sometimes when modifying, the project needs to be restarted. Even if you don’t use the variables of the project system environment, but use a global variable, similar to the one mounted under the window, it feels a bit redundant (if others know this variable and modify it, or if the environment is polluted, it will be a problem) , so skip the first method directly.
After deciding to adopt the second method, because the system configuration information already exists in Vuex, a method is defined to obtain the link icon node and then copy its href again.
The result is that it is very easy to implement, and the task is considered to be completed after the code is submitted.
Problem: When switching sub-apps in Firefox browser, the tab page uses the icon of the sub-app
I have modified the href of the link icon of the main application before, but the href of the link icon of the sub-application remains the same, causing the icon to switch back to the icon that comes with the Vue project instead of the system configuration when switching sub-applications An icon for encoding 64 format addresses. This problem does not exist in Google Chrome, but only in Firefox.
At the beginning, I tried to remove the link icon tag of the sub-application, but it was useless. The page still has the sub-application tag, and it was useless to remove the pwa shown in the figure below.
It seems that Vue will use the favicon.ico file in the root directory by default without setting the link icon. So still have to rely on the most primitive method - get its node, and then change.
But in the main application, where can I get the nodes of the loaded sub-applications? At the beginning, I wanted to write it in the route interception of the main application, and get the node modification after the route loading is completed. It can be found that it is invalid. Although the route is loaded, the sub-application has not been loaded yet. Therefore, it is better to write it in the afterMount of the life cycle function of the sub-application, so that you do not need to obtain a node every time the route jumps, but modify its link icon when starting a new sub-application, and you can also Ensure that in browsers like Firefox in the future, the link icon of the sub-application will not affect the icon of the main application, so that the icon of the sub-application is displayed on the tab page of the browser.
Finally it worked:
