之前使用都是没有问题啊,为什么有问题呢?去查资料 很快找到了解决办法

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不解析

 

# webpack # css
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

灯光模拟HarmonyOS应用实战-16-重置灯光、重开考试和返回首页时要清掉哪些状态

avatar HarmonyOS开发者社区

鸿蒙开发ArkData用户首选项实战：从夜间模式到多进程配置的完整案例

用户首选项（Preferences）是 ArkData 里最轻量的存储，但用得最频繁——几乎每个应用都要存配置。下面用一个"应用设置中心"的完整案例，把读写、订阅、存储模式选择、容易出问题的点全过一遍。

avatar HarmonyOS开发者社区

鸿蒙ArkData键值型数据库实战：Schema 定义与商品库存同步案例

Schema 是 KV-Store 里一个容易被忽略的概念。它定义了 Value 的字段结构、类型、索引。数据有约束，写入不合规数据会被拦截建了索引，查询更快分布式同步时，两端 Schema 一致才能正确同步console.info('KVManager 未初始化');return;try {// 定义字段节点// 组装 Schema// 索引路径// 1 表示 STRICT 严格模式，0 表示

avatar HarmonyOS开发者社区