vue中~@和@的区别

一、vue2.x配置@指向src三种方法

vue2.x配置@指向src三种方法

二、vue中~@和@的区别

2.1. @

以@开头的url，会作为一个模块请求被解析。

它的用处在于 Vue CLI 默认会设置一个指向 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>

2.2. ~@

这里有个理解误区：~@和@的指向都是一样的，唯一的区别在于是否添加~符号，并不是~@特殊。

以~开头的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>