美文网首页
vue项目网站图标favicon及网页标题设置

vue项目网站图标favicon及网页标题设置

作者: AI时代岁月笔记 | 来源:发表于2020-08-21 16:49 被阅读0次

    一、favicon

    a. 准备一个logo图片,皓宜的很简单,我直接用css做一个样式,然后截图生成一个图片

    b. 然后将图片通过转换工具生成favicon.ico图标

    c. 将favicon.ico文件复制到 src/assets/images/下面

    d. 在build文件夹下找到webpack.dev.config.js, 添加以下内容

    e. 重新npm run dev 效果出来了,如下

    二、网页标题

    a. 在路由中设置meta: {title: '首页'}

    b. 在main.js中设置当路由改变时切换标题

    /* 路由发生变化修改页面title */

    router.beforeEach((to, from, next) => {

      if (to.meta.title) {

        document.title = to.meta.title

      }

      next()

    })

    相关文章

      网友评论

          本文标题:vue项目网站图标favicon及网页标题设置

          本文链接:https://www.haomeiwen.com/subject/tstpjktx.html