@
以@
开头的url
,会作为一个模块请求被解析。
它的用处在于 Vue CLI 默认会设置一个指向 <projectRoot>/src
的别名 @
。 (仅作用于模版中)
说人话:
@
指向的是src
目录,且只能在<template></template>
和<script></script>
中使用,在<style></style>
中使用会报错。
例:
<template>
<img src="@/images/logo.png">
</template>
<script>
import "@/utils/index.js";
import Methods from "@/utils/index.js";
</script>
~@
这里有个理解误区,~@
和@
的指向都是一样的,唯一的区别在于是否添加~
符号,并不是~@
特殊。
以 ~
开头的url
,其后的任何内容都会作为一个模块请求被解析,即使是相对路径。
说人话:
加上~
前缀的url
可以在任意地方使用,甚至可以引用node
资源。
例:
<template>
<div>
<img src="@/images/logo.png">
<img src="~@/images/logo.png">
<img src="~..../images/logo.png">
</div>
</template>
<style>
.bg-img {
background: url("~@/assets/images/logo.png");
}
</style>