Vue cli4 配置檔案路徑別名以及使用詳解

2021-10-19 09:47:55 字數 862 閱讀 6297

在開發vue專案中,我們經常需要引入不同的檔案,這時就需要針對檔案的路徑進行設定,僅僅使用./ .//來進行檔案的匯入,維護和更改都變的相當麻煩,需要對檔案的路徑相當熟悉才可以
所以可以設定alias別名來方便操作,然後腳手架cli4中並沒有和cli2一樣自動生成乙個webpack.base.config.js檔案來讓我們直接寫別名。所以需要我們自行建立,步驟如下:

專案根目錄下建立vue.config.js檔案

與package.json 同級目錄

2. 配置檔案中寫入一下**:

// 用來配置檔案的別名,方便路徑的尋找

const path =

require

('path');

//引入path模組

function resolve

(dir)

module.exports=

}

別名的使用

1:html-dom中使用:需要在前面加上  ~ 

2:css中可以直接使用

3:router路由配置中:直接使用

4 比較全面的配置部落格:

vue cli4配置動態位址

有些資源位址 vue打包之後如果修改需要重新打包,這就很煩,有很多 vue cli2 的參考文件,剛好配置出了 vue cli4 在這裡記錄一下 安裝 generate asset webpack plugin yarn add generate asset webpack pluginvue.co...

vue cli4 環境配置

在專案中建立 env.development 檔案 npm run serve 預設指本檔案 建立.env.productionenv檔案 cnpm run build 預設此檔案 env.development 檔案 node env development 開發模式執行環境 env.produc...

Vue Cli 4版本執行環境配置

vue cli自3.x以上版本取消了config目錄,我們沒法直接在config目錄下的檔案中對執行環境進行配置,因此需要開發者手動完成配置。在專案的根目錄新建vue.config.js檔案,並在該檔案中配置相應的啟動項。vue.config.js module.exports 配置並儲存vue.c...