vue中引入路徑@的用法及說明

更新時間：2022年09月22日 09:00:03 作者：貓人谷

這篇文章主要介紹了vue中引入路徑@的用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

引入路徑@的用法及說明

Vue文件中引用路徑的介紹

1、路徑 ./

./當(dāng)前文件同級目錄

2、路徑 …/

…/當(dāng)前文件上一級目錄

3、@符號

@ 的作用是在你引入模塊時，可以使用 @ 代替 /src 目錄，避免易錯的相對路徑。

Vue中使用

1. vue.config.js配置文件中使用

? chainWebpack(config) {
? ? config.resolve.alias
? ? ? .set('@', resolve('src'))
? ? ? .set('assets', resolve('src/assets'))
? ? ? .set('utils', resolve('src/utils'));
? },

2. @代表src目錄

如：你在（src/views/pmp/setLarge/index.vue）文件中想引入（src/assets/setLarge.png）的圖片，正常情況下你需要（…/…/…/…/src/assets/setLarge.png）才能找到該圖片，但如果你配置了就可以這樣簡寫（src/assets/setLarge.png）

vue項(xiàng)目路徑使用@的原因

@是webpack設(shè)置的路徑別名

在vue項(xiàng)目中我們會引入文件或者組件，在引用的時候會用@符號

因?yàn)檫@利用了到了webpack的 alias 別名

在build/webpack.base.conf.js中配置的別名：

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }

默認(rèn)會有‘@’別名，指向src目錄，還可以添加自定義別名。

使用場景

1. js，也是最為常用的使用場景

js引用方式

2. css，在使用的時候需要加入~，并且不要寫成字符串

{
	background: url(~@/static/img/order.jpg);
}

3. html，~ 可加可不加。

<img class="icon" src="@/static/phone.png" alt="綁定手機(jī)">
<img class="icon" src="~@/static/phone.png" alt="綁定手機(jī)">

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

前端vue實(shí)現(xiàn)甘特圖功能
dhtmlxGantt是一個強(qiáng)大的JavaScript Gantt圖表庫,提供易于使用、高度可自定義的Gantt圖表組件,它支持多項(xiàng)任務(wù)和進(jìn)度條,以及多種列和行布局,可用于創(chuàng)建各種類型的時間線和計劃表,本文給大家介紹前端vue實(shí)現(xiàn)甘特圖的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧
2024-04-04
vue中多附件上傳的實(shí)現(xiàn)示例
這篇文章主要介紹了vue中多附件上傳的實(shí)現(xiàn)示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-04-04
axios進(jìn)階實(shí)踐之利用最優(yōu)雅的方式寫ajax請求
之前給大家介紹了jQuery利用最優(yōu)雅的方式寫ajax請求的相關(guān)內(nèi)容，這篇文章主要給大家介紹了關(guān)于axios進(jìn)階實(shí)踐之利用最優(yōu)雅的方式寫ajax請求的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
2017-12-12
Vue.js中的組件系統(tǒng)
這篇文章主要介紹了Vue.js之組件系統(tǒng),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-05-05
vuejs2.0實(shí)現(xiàn)一個簡單的分頁示例
本篇文章主要介紹了vuejs2.0實(shí)現(xiàn)一個簡單的分頁示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
VUE中data配置項(xiàng)詳細(xì)解析
data屬性是Vue實(shí)例的數(shù)據(jù)對象,可以綁定的是對象或者是函數(shù),下面這篇文章主要給大家介紹了關(guān)于VUE中data配置項(xiàng)詳細(xì)解析的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
vue-router判斷頁面未登錄自動跳轉(zhuǎn)到登錄頁的方法示例
這篇文章主要介紹了vue-router判斷頁面未登錄自動跳轉(zhuǎn)到登錄頁的方法示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
在Vue項(xiàng)目中,防止頁面被縮放和放大示例
今天小編就為大家分享一篇在Vue項(xiàng)目中,防止頁面被縮放和放大示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
vue中element-ui不能修改el-input框,或是不能修改某些值問題
這篇文章主要介紹了vue中element-ui不能修改el-input框,或是不能修改某些值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
VueTreeselect?參數(shù)options的數(shù)據(jù)轉(zhuǎn)換-參數(shù)normalizer解析
這篇文章主要介紹了VueTreeselect?參數(shù)options的數(shù)據(jù)轉(zhuǎn)換-參數(shù)normalizer解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07