Vue專案路徑別名設定

2021-08-20 22:08:11 字數 473 閱讀 2938

用vue-cli搭建好vue專案之後,進入正式開發過程,有時候會發現各種import路徑中都存在長串的重複路徑,比如:

import 'src/assets/styles/reset.css'

import 'src/assets/styles/border.css'

為了方便維護,可以開啟build檔案下的webpack.base.conf.js檔案,在module.exports中找到resolve欄位,在其中為重複路徑設定乙個足以表意的別名:

resolve: 

},

這裡'styles'字段就是我設定的別名,以後在專案中引用路徑含有'src/assets/styles'的檔案,只需如下:

import 'styles/reset.css'

import 'styles/border.css'

三 Vue中設定路徑別名

在 css 或者 js 中,有時候需要引入其他相關檔案,若目錄層級比較多,那麼路徑會相當長,而且重複書寫,比較麻煩。為了解決這個問題,我們可以採用為路徑設定別名的方式,來簡化路徑書寫。下例是使用 vue cli3.0構建專案,步驟如下 const path require path function...

Vue 設定別名

我們在寫vue 的時候需要引入許多的元件,或者是css樣式。當我們的檔案越來越多,層級也越來越多的時候引入就比較麻煩,要寫很多的 比如這樣 import son from son 為了書寫方便,我們可以給vue路徑設定別名,來節省 的輸入次數,提高開發效率 在檔案裡面輸入下面的 const path...

vue 相對路徑 路徑別名設定

這是相對路徑的意思,同級目錄。上級目錄。這是webpack設定的路徑別名。在build webpack.base.conf這個檔案裡面設定了 具體指的是什麼 在build webpack.base.conf裡找到如下 resolve 使用import heads from components ch...