美文网首页vueVue
vue项目部署到服务器后页面找不到favicon.ico 的解决

vue项目部署到服务器后页面找不到favicon.ico 的解决

作者: Qingelin | 来源:发表于2020-08-11 11:32 被阅读0次

    在做web项目时发现代码并没有任何问题,但是在本地服务器端不能浏览页面,浏览器提示favicon.ico文件不存在,status code 为 404,这其实是在Vue项目中调用ELement UI 而引起的图标不显示解问题,原因是 /build/webpack.base.conf.js 文件可以发现,woff 或 ttf 这些字体会经由 url-loader 处理后在 static/fonts 目录下生成文件,而实际应该通过 /static/fonts/ 路径来获Element UI图标,但是服务器中的请求路径是/static/css/static/fonts/,所以报404.

    第一种方法:

    1. 第一步:在biuld/util.js/文件中如下位置添加路径:


      添加路径
        publicPath: '../../'
    
    1. 第二步:重新 npm run build 就可以.

    第二种方法:

    1. 第一步:在跟目录index.html所在目录中新建一个favicon.ico图片文件 2.png
    2. 第二步:在head标签里引入这个文件,即输入这一行
        <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    

    这时候浏览页面标签栏中能看到对应的图标,但有时候还是不显示页面内容,这时候继续执行第三步

    1. 第三步:
      这时候即使是有了favcon.ico 文件,但还是页面不显示 的话在终端输入以下命令行:
      npm run dev
    

    相关文章

      网友评论

        本文标题:vue项目部署到服务器后页面找不到favicon.ico 的解决

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