【已解决】vue项目地址栏的图标不显示

【已解决】地址栏的图标不显示

解决方法:

  1. 图片的格式生成为.ico,利用Windows自带的画图,16*16的大小,选择另存为bmp文件,把后缀改成.ico 依然不显示。
  2. 在vue的项目中,图标一类的静态文件应该放在static文件夹中,不能放在src 中,网页把根域名作为相对路径的根目录了,然而我们文件的路径是相对于项目文件的根目录的,因此就找不到了。而static文件夹下的文件(夹)会按照原本的结构放在网站根目录下。这时我们再去使用/static绝对路径,这样就可以访问这些静态文件了。成功解决不显示的问题。
  3. <header></header> 中加入:
<link rel="shortcut icon" type="image/x-icon" href="static/img/favicon.ico"/>

意思是将该目录的.ico图标以图标的形式显示
shortcut icon 专指地址上面的图标
image/x-icon" 同上

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link  type="image/x-icon" href="static/img/favicon.ico"/>
    <title>
      统一风控与策略分析管理系统
    </title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue开发Chrome插件需要以下几个步骤: 1. 创建一个Vue项目:首先需要安装Vue CLI来创建一个新的Vue项目。在命令行运行如下命令来创建项目: ``` vue create chrome-extension-project ``` 根据提示选择需要的配置项,如Babel和Router。创建完成后,进入项目目录: ``` cd chrome-extension-project ``` 2. 配置Chrome插件:在项目根目录下创建一个`manifest.json`文件,该文件用于配置插件的基本信息,例如插件名称、描述、图标、权限等。详细的配置可以参考Chrome官方文档。 3. 开发Vue组件:使用Vue开发插件的界面。可以在`src`目录下创建Vue组件,并在需要的地方使用它们。可以使用Vue Router来管理插件的不同页面或者使用Vuex来处理全局状态。 4. 构建插件:在命令行运行如下命令来构建插件: ``` npm run build ``` 该命令会将Vue项目打包成一组静态文件,可以在`dist`目录找到构建好的插件文件。 5. 导入插件:在Chrome浏览器打开扩展程序页面(在地址栏输入`chrome://extensions`),点击右上角的“开发者模式”,然后点击“加载已解压的扩展程序”,选择之前构建好的插件文件夹(即`dist`目录)。 6. 调试和发布:在Chrome浏览器调试已加载的插件,可以通过“检查视图”来调试Vue组件。如果插件开发完成并通过测试,可以在Chrome Web Store上发布插件,供用户下载和使用。 总结起来,Vue开发Chrome插件的过程可以概括为:创建Vue项目,配置插件信息,开发Vue组件,构建插件文件,导入插件到Chrome浏览器,调试并最终发布。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值