zoukankan      html  css  js  c++  java
  • vue项目引入背景图报Module not found: Error: Can't resolve './src/assets/theme/logo_blue.png' in'xxx'错误

    background: url('./src/assets/theme/logo_blue.png') no-repeat center center;

    正确的写法

    background: url('~@/assets/theme/logo_blue.png') no-repeat center center;

    那么问题来了,

    1.之前这样写为什么没有错? 

    2.为什么要这么写? ~和@是什么意思呢?

    第一个问题:查资料发现,

    vue2.5及以下版本以上两种写法都没有问题, 2.6就出现这个问题,应该和webpack配置相关 .
    vue2.6用的是webapack4.0(待我学习下webpack4.0的官方文档)


    第二个问题: webpack资源处理的规则,分为相对路径,没有前缀的路径,带~的路径,相对根目录的路径

    1.相对路径: "./assets/logo_blue.png" 
    2.没有前缀的路径 "assets/logo_blue.png" 被webpack解析为 相对路径
    3.带~的路径  "~@/assets/theme/logo_blue.png" 被webpack解析为 require(src/assets/theme/logo_blue.png) 动态引入 
    @在webpack 被resolve.alias配置下等价于/src
    4.相对根目录的路径 "/assets/logo_blue.png" webpack不解析
  • 相关阅读:
    将Vim改造为强大的IDE
    Ubuntu首次开启root用户
    ssh-keygen实现免密码登陆
    Ubuntu下配置samba服务器实现文件共享
    Ubuntu下Apache+php+mysql网站架设详解
    IIS支持PHP
    详解C/C++预处理器
    学C++之感悟
    return *this和return this的区别
    const 的全面总结
  • 原文地址:https://www.cnblogs.com/yeminglong/p/12734819.html
Copyright © 2011-2022 走看看