vue修改该项目浏览器顶部图片和title

落日映苍穹つ 2023-03-13 02:27 8阅读 0赞

如下所示，一般每个项目都会有自己的浏览器显示图片和title ,那么我们应该怎么来修改它们呢

![20200509181752329.png][]

###  1，修改项目浏览器的图片 ###

第一步： 在你的项目里面找到public下

public/ favicon.ico文件

![20200509182041354.png][]

到所在目录里面，把你需要的图片放上去，改图片名称为 favicon.ico，把原先的要删除

![20200509182317989.png][]

第二步：在vue.config.js文件中添加，这个文件在vue-cli3.0是没有的，需要手动添加

module.exports = {
     pwa: {
      iconPaths: {
        favicon32: 'favicon.ico',
        favicon16: 'favicon.ico',
        appleTouchIcon: 'favicon.ico',
        maskIcon: 'favicon.ico',
        msTileImage: 'favicon.ico'
      }
    }
    }

第三步：

重新运行项目，并刷新浏览器。查看是否修改成功。

### 2，修改所在项目的浏览器title ###

1)  在你的项目里面找到public下的index.html

![20200509182644447.png][]

2)找到<title> 标签，在里面写上你的title

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

3)如果你需要动态添加title

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1][]

在你的router.js页面，meta里添加title：" 想添加的tltle"

获取你的title的值的话可以用：

document.title

this.pageText=this.$route.meta.title;

[20200509181752329.png]: /images/20230312/78aa9fa68d014a948a8b69001f60b138.png
[20200509182041354.png]: /images/20230312/f1e02c9512374ee096cb4c6075f5ff6f.png
[20200509182317989.png]: /images/20230312/a4cf39fb68c24ab9933f21631c55a622.png
[20200509182644447.png]: /images/20230312/958204fec58e46af932856b5747501f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: /images/20230312/2fb052f2044f4302844ff978c3f600ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1]: /images/20230312/3016a14ace54428785b878c8112fa79f.png