vue-cli 項目配置路徑別名

1.vue-cli 2.x 配置方式

在vue-cli 2.x項目中，進入build文件夾，找到webpack.base.conf.js，編輯文件 ，并找到resolve字段的配置項。

resolve: {extensions: ['.js', '.vue', '.json'], //這個是匹配擴展名的alias: { //這里添加路徑別名'@': resolve('src'), //src解析成@'assets': resolve('src/assets'), // src/assets解析成assets} }

2.vue-cli 3.x 配置方式

2.1配置文件位置(了解)

vue-cli 3.x以上的項目結構被精簡了， 后來上網找了一下，配置文件被藏到了node_modules/@vue/cli-service/lib/config/base.js里面

.modules.add('node_modules').add(api.resolve('node_modules')).add(resolveLocal('node_modules')).end().alias.set('@', api.resolve('src')) //這里配置的

2.2配置方法（方法）

我們雖然知道了配置文件位置，但是我們不通過修改node_modules/@vue/cli-service/lib/config/base.js來添加路徑別名，而是在項目的根目錄創建一個vue.config.js。vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那么它會被 @vue/cli-service 自動加載。

const path = require('path'); //path模塊 function resolve (dir) {return path.join(__dirname, dir) }// 項目的主要配置文件 module.exports = {//set第一個參數：設置的別名，第二個參數：設置的路徑chainWebpack: (config)=>{//修改文件引入自定義路徑config.resolve.alias.set('@', resolve('src')).set('assets', resolve('src/assets'))} }

3.使用

使用的配置的路徑別名時，為了區分原路徑和別名我們用~符合來區分

<!--這條會按原路徑找--> <img src="assets/img/test.jpg"/> <!--這條會按路徑別名找--> <img src="~assets/img/test.jpg"/> 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的vue-cli 项目配置路径别名的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。