assetsPublicPath: “./“ 导致 ElementUI icon图标显示不出来

最新推荐文章于 2023-09-25 09:09:34 发布
最新推荐文章于 2023-09-25 09:09:34 发布
阅读量834 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinQiaoJieDuPian/article/details/114301988
版权

背景:

  1. webpack 2.6.1版本下的vue项目
  2. 本地跑项目elementUI中的icon等都正常显示, 发布测试环境后, icon就找不到显示为一个框

正常icon效果:如框中的图标
资源路径
可以看到正确的资源是如此: static/fonts/element-icons.535877f.woff

失败icon效果:
如框中的图标
在这里插入图片描述
资源路径明显比之前多了: static/css/
static/css/static/fonts/element-icons.535877f.woff

因此说明: 引用资源路径的方式出现了问题

assetsPublicPath: 代表打包后，index.html里面引用资源的的相对地址

	故需要修改 config/index 文件中 assetsPublicPath 的配置, 
	由于测试环境域名后面加了: jicaipc 这个节点前缀,
	打包后除了index.html 其他资源均在 jicaipc/static 下面


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  _银翘解毒片_
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
Element UI 部署到服务器，图标不显示问题

				
			

			

				

					weixin_48474646的博客
				

				

					11-29
					
					1758
					
				

			

		

		

			
				
vue项目引用Element UI组件后，本地运行时，图标是正常显示的，但是打包部署后，图标不显示。

			
		

	



                

              
                



	

		

			

				
					
element-ui图标显示不出来问题

				
			

			

				

					weixin_46106879的博客
				

				

					12-31
					
					3571
					
				

			

		

		

			
				
@[element-ui显示不出来问题]
1.原因：
由于项目中ele版本过低，低版本中没有需要的图标。
2.解决方案：
① package.json文件中修改element-ui的版本号。
②使用npm install 重新安装依赖包。
③npm run dev 重新运行项目。


...

			
		

	



                


  
              

                


	

		

			

				
					
vue打包assetsPublicPath为‘./‘和‘/abc/‘的两种情况

				
			

			

				

					qq_44021541的博客
				

				

					06-01
					
					2682
					
				

			

		

		

			
				
vue 测试 和正式环境打包 （npm run build）
assetsPublicPath路径可以设置为大致两种在nginx代理的方式也各有差异
第一种: assetsPublicPath: ‘ ./’
		location / {
			root /home/lw/hy/admin/dist;
			index index.html index.htm;
			autoindex on;
			expires  30m;
		}
		

第二种: assetsPublicPath: ‘/qbcd/’


			
		

	





	

		

			

				
					
element-ui 自带图标无法显示（已解决）

					
热门推荐

				
			

			

				

					今晚吃火锅的博客
				

				

					03-19
					
					1万+
					
				

			

		

		

			
				
使用vue时 ，引用el-menu组件发现自带的el-icon-arrow-down无法显示。

更换element-ui版本后依旧无法显示。
最后发现没有样式。
解决方法：
在main.js中引入对应样式：

这样就能显示出来啦，并不是因为版本问题或者是引入的路径不对。


...

			
		

	



		

			
		



	

		

			

				
					
vue项目打包 打包运行报错以及Element UI字体图标不显示问题解决详细过程

				
			

			

				

					格の调
				

				

					03-08
					
					3456
					
				

			

		

		

			
				
vue项目本地开发完成后要部署上限，需要先把项目打包，打包步骤我经过试错，总结出简单3步完成。
项目有更新情况打包：

非首次打包可直接：npm run build
即项目前期已经配置好，并经打包部署过运行没有什么问题，后期局部修改后重新打包，可直接运行以上命令进行打包。


项目初次打包部署
项目初次打包部署或打包后运行有问题，需进行以下三步操作：
第1,2步中修改的2处文件位置：

1.config>index.js 文件
里面的dev是开发环境，build是打包部署运行的版本。

找到build

			
		

	





	

		

			

				
					
vue打包后404以及ElementUI打包后图标不显示问题

				
			

			

				

					progrmmmm的博客
				

				

					10-15
					
					473
					
				

			

		

		

			
				
1.vue打包404

config中index.js文件的build中的assetsPublicPath: '/',改为assetsPublicPath: './',


build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    a

			
		

	





	

		

			

				
					
从https://www.iconfont.cn/复制icon到axure的插件

				
			

			

				

					09-29
				

			

		

		

			
				
地址栏输入chrome://extensions/，然后把下载的插件拖上去，记得打开开发者模式

			
		

	





	

		

			

				
					
vue+elementUi 实现密码显示/隐藏+小图标变化功能

				
			

			

				

					10-15
				

			

		

		

			
				
主要介绍了vue+elementUi 实现密码显示/隐藏+小图标变化功能,需本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

			
		

	





	

		

			

				
					
Vue elementui字体图标显示问题解决方案

				
			

			

				

					10-14
				

			

		

		

			
				
主要介绍了Vue elementui字体图标显示问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

			
		

	





	

		

			

				
					
vsCode插件开发demo合集

文章详情: http://t.csdnimg.cn/W0mF8

					
最新发布

				
			

			

				

					06-03
				

			

		

		

			
				
vsCode插件开发 01环境搭建+helloWorld 本文主要记录：基础环境搭建+helloworld程序运行 ...本文主要记录:左侧抽屉面板的相关配置/设置、插件icon的相关设置  vsCode插件开发 07webView 本文主要记录:webView的开发内容

			
		

	





	

		

			

				
					
@uiwjs组件库的高级图标字体。 https://uiwjs.github.io/icons-JavaScript开发

				
			

			

				

					05-26
				

			

		

		

			
				
uiw-icons uiwjs组件库的高级图标字体。 由@ liwen0526设计。 访问https://uiwjs.github.io/icons/并检查搜索功能，该功能具有用于标识常用图标名称和样式的关键字uiw-icons uiwjs组件库的高级图标字体。 由@ liwen...

			
		

	





	

		

			

				
					
vue-cli3打包至非根目录及element.ui字体图标丢失

				
			

			

				

					weixin_47711357的博客
				

				

					04-20
					
					999
					
				

			

		

		

			
				
vue-cli3脚手架打包至线上非根目录需要的两步操作：
 在项目目录下的config/index.js中设置assetsPublicPath为’./‘，代码如下：
 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    asset

			
		

	





	

		

			

				
					
element-ui的问题

				
			

			

				

					繁华是瑾的博客
				

				

					12-04
					
					364
					
				

			

		

		

			
				
1、解决部署到服务器后Element UI图标不显示问题（404错误);打开 build/utils.js 文件，在如下位置添加 publicPath: '…/…/'

2、弹窗关闭报错误 数据传递的错误
   :before-close=“close"

3、导航菜单,连续点击同一个导航时,报错
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// router文件夹-->index.js文件
/

			
		

	





	

		

			

				
					
vue项目打包element-icons路径错误

				
			

			

				

					一梦晓三生的博客
				

				

					12-09
					
					1456
					
				

			

		

		

			
				
问题描述
vue项目打包之后，部署运行时报错显示字体路径错误/static/css/static/fonts/element-icons.535877f.woff，正确路径是/static/fonts/element-icons.535877f.woff。
解决办法
1.在build/utils下的ExtractTextPlugin.extract下添加publicPath:'../../'
    // (which is the case during production build)
    if 

			
		

	





	

		

			

				
					
vue打包 assetsPublicPath改变，static下文件访问不到的问题

				
			

			

				

					Mr青青子衿
				

				

					08-29
					
					3451
					
				

			

		

		

			
				
问题背景： 一、.smallTarget项目，使用vue官网脚手架，修改了/config/index.js文件，把默认打包后的文件夹名称改成了“smallTarget”，这时候npm run build 打包部署，就可以访问到以smallTarget为根目录的页面。...

			
		

	





	

		

			

				
					
vue打包 element-icons.woff 和element-icons.ttf 字体文件路径错误，导致icon图标显示成小方块的问题

				
			

			

				

					在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
				

				

					09-25
					
					1997
					
				

			

		

		

			
				
vue打包 element-icons.woff 和element-icons.ttf 字体文件路径错误，导致icon图标显示成小方块的问题

			
		

	





	

		

			

				
					
vue+elementUI项目打包后图标不展示，展示方框

				
			

			

				

					weixin_46156770的博客
				

				

					09-17
					
					565
					
				

			

		

		

			
				
vue+elementUI项目打包后图标不展示，展示方框
build.js > utils.js 下添加publicPath:’…/…/’
if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:'../../',//防止项目打包后图标不展示
        fallback: 'vue-style-loader'
      })
    } el

			
		

	





	

		

			

				
					
Vue.js - 解决部署到服务器后Element UI图标不显示问题（404错误）

				
			

			

				

					院长大忍的博客
				

				

					10-29
					
					2350
					
				

			

		

		

			
				
解决部署到服务器后Element UI图标不显示问题 其实就是有些字体库在用户那边下载失败了  原因是npm run build打包的时候有些问题 需要修改下 build目录里面的文件

			
		

	





	

		

			

				
					
关于vue项目中history模式下静态资源路径错误的问题和assetsPublicPath的相关配置

				
			

			

				

					weixin_43754275的博客
				

				

					04-26
					
					6412
					
				

			

		

		

			
				
关于vue项目中history模式下静态资源路径错误的问题和assetsPublicPath的相关配置背景问题解决我的原因分析首先概念:总结参考文章
背景
在做QQ第三方登陆时,一直报错回调域错误，貌似是回调域里不能有"#"字符，所以决定使用history的路由模式，后台node通过connect-history-api-fallback插件配置.
问题
配置完成之后发现，访问页面根目录的时候一切...

			
		

	





	

		

			

				
					
"tabBar": {
    "list": [{
      "pagePath": "pages/home/hmoe",
      "text": "首页",
      "iconPath": "./miniprogram/images/首页.png",
      "selectedIconPath": "./miniprogram/images/指纹解锁.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "./miniprogram/images/消息.png",
      "selectedIconPath": "./miniprogram/images/指纹解锁.png"
    },{
      "pagePath":  "pages/contact/contact",
      "text": "设置",
      "iconPath": "./miniprogram/images/icon_设置.png",
      "selectedIconPath": "./miniprogram/images/指纹解锁.png"
    }
  ]
  },

				
			

			

				

					07-14
				

			

		

		

			
				
这段代码是用于配置小程序的TabBar导航栏的信息。每个TabBar项包括以下属性：

- `pagePath`: 页面路径，指定该项点击后跳转的页面路径。
- `text`: 显示在TabBar上的文本内容。
- `iconPath`: 未选中状态下的图标路径。
- `selectedIconPath`: 选中状态下的图标路径。

根据您提供的代码，共有三个TabBar项，分别对应三个页面：首页、消息和设置。每个TabBar项都有一个未选中状态下的图标和一个选中状态下的图标。

请注意，路径应根据您的项目结构和文件位置进行相应调整，确保图标文件能够正确加载。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值