vue 專案中引用路徑的配置

2021-10-01 16:12:44 字數 1165 閱讀 3425

在日常的專案開發中,經常會引用css,less,js,img等的檔案的路徑問題,之前也有些模糊,現在記錄下來,方便自己清晰的理解一遍,也方便以後使用。

首先說說最常見的./../兩種

./:是指當前目錄下

../:是指父級目錄下

接下來再說說@

@就是你在build資料夾下webpack.base.conf.js檔案中的resolve目錄下配置的

resolve: 

},

你還可以配置其他的路徑,比如說你的專案層級較深,引入路徑很繁瑣。例如

resolve: 

},

注意,配置好了,要重啟專案哦,我再這裡也花了好久的時間,感覺一直不生效,最後重啟了專案,才好了

其實他就是相對路徑,舉個例子,一看便知,我也是遇到坑了爬了好久才出來,

之前我再專案中應用乙個公共的less,怎麼寫都不生效,也不知道為啥,後來不斷搜尋詢問,也是加了乙個~才好了

@import url('~@/components/tigerbasecss/index');
經過這次爬坑,好好了解了一下~的作用,才明白,原來是這樣

~表示該符合後面值是從你的webpack.base.conf.js檔案中的resolve目錄下配置的路徑去找的。

@import url('~@/components/tigerbasecss/index');

就相當於是

@import url('src/components/tigerbasecss/index');

或者說你配置的
看到這裡大概已經了解了把,還有什麼不足的,大家多提出,及時改正。

如何在Vue專案中配置路徑別名

首先在當前專案的根目錄下建立乙個vue.config.js的檔案,這個檔案在vue腳手架3中不會自己建立,需要自己手動建立,建立完成後新增如下 module.exports 上述 中 alias物件中的 鍵 相當於路徑的別名 而 值 相當於具體的路徑 這樣我們的路徑別名就配置好了,在專案中我們再也不...

關於vue專案中路徑跳轉

為什麼host和hostname返回的都是一樣的,卻還是分別分為兩個字段進行返回?還有host或者hostname和origin有什麼區別呀?然後我就在瀏覽器位址列中輸入上面三個,發現都可以訪問到 覺得還好,應該沒什麼區別,然後我就在一次頁面跳轉的時候,選擇了使用window.location.hr...

vue專案中api index中的配置

首先安裝模組yarn add axios 1.引入axios模組 import axios from axios 2.全域性配置 axios.defaults.baseurl 最後打包改為你伺服器的 3.新增請求 axios.interceptors.request.use function con...