vue项目 webpack打包后，图片路径是绝对路径

vue项目，使用webpack打包，虽然在全局把路径改成了相对的路径，但是图片引用的路径还是异常的，解决办法如下：

1、config文件夹下index.js中：

assetsPublicPath:"./"

背景图片的引用问题

上面虽然解决了资源路径的引用问题，但是资源里面的背景图片，不像index.html中加载资源一样，通过./static/js/app.js引用可以正常加载，图片资源是通过css加载的，如 background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了url(static/img/logo-index.2f00bf2.png) no-repeat所以我们要保留css引用图片的正常路径，即：

?
1
url(../../static/img/logo-index.2f00bf2.png) no-repeat

那么就需要修改build文件夹下的utils.js代码，如图所示：

 







            

            
posted @ 
 
karila 
阅读(4818) 
评论(0) 
编辑 
收藏 
举报


        

        
        




    
    

    
    



    

        
    

        

            
                
                
            
        

    

编辑推荐：



· .NET Core 中如何实现缓存的预热？
    

· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
    

· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
    

· 基于Microsoft.Extensions.AI核心库实现RAG应用
    

· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
    



    

    阅读排行：
    

 ·          TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
        

 ·          阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
        

 ·          【译】Visual Studio 中新的强大生产力特性
        

 ·          10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
        

 ·          【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
        



    

历史上的今天：



2017-08-23    Window下搭建foundation apps环境
    

2017-08-23    关于node-sass安装失败的解决办法
    



    



    



            

        


        
        

    

    

    




    

    
    








  

  
点击右上角即可分享

  微信分享提示

   
    
SQL AI 助手