vue cli裡的 ~@ 是什麼意思? 談談vue cli的路徑

前幾天踩到路徑的坑，在vue cli中引入字體一直噴錯(等下會講)，所以決定來寫一下紀錄。

引用路徑方式

在vue中有以下幾種方式引用路徑

• 絕對路徑
• 相對路徑
• ~開頭的模組
• @開頭的模組

@為src資料夾的縮寫

例如你的檔案結構很深，用相對路徑就必須用 ../ 一直點下去會到天荒地老 ，所以webpack已經幫你包好，@就是src 的別名

例如

@import '../../../../assets/css/main.scss'

可以簡寫成

@import '@/assets/css/main.scss'

來個例子

錯誤寫法:

會被當作字串而不是路徑，需要在外面加層 require( )

<template>
  <img :src="imgSrc" />
<template>

<script>
const src = '@/assets/img/logo.png';
export default {
  data() {
    return {
      imgSrc: src,
    };
  },
};
</script>

正確寫法:

<template>
  <img :src="imgSrc" />
<template>

<script>
const src = require('@/assets/img/logo.png');
export default {
  data() {
    return {
      imgSrc: src,
    };
  },
};
</script>

如果不綁定，直接寫在裡面也行

<template>
  <img src="@/assets/img/logo.png" />
<template>

~ 開頭，以後的内容都會被當作模組請求被解析

在css以及html中是不能只寫 @ 的，會找不到路徑而報錯，來看以下例子

原本我是寫:

@font-face {
  font-family: "Noto Sans TC";
  src: url(@/assets/font/NotoSansTC-Regular.otf) format("OpenType");
}

然而會出現錯誤如圖

正是因為webpack編譯後的路徑是 ./@/assets/font/NotoSansTC-Regular.otf 而正確的路徑則是 src/assets/font/NotoSansTC-Regular.otf，所以當然會找不到，此時只要在前面加上 ~ 就可以解析成根目錄底下的src資料夾!

@font-face {
  font-family: "Noto Sans TC";
  src: url(~@/assets/font/NotoSansTC-Regular.otf) format("OpenType");
}

background-image也可以這樣使用 ~

background-image: url(~@/assets/img/signInBg.jpg);

這樣大家有沒有更加了解@與~的用法呢?

---

參考資料:
react+less中使用动态路径（波浪线~的使用）
Vue Cli 从相对路径导入
webpack中的css引入文件需要用~@的形式，为什么？