基於webpack的vue專案路徑別名

2022-03-19 12:07:53 字數 405 閱讀 5536

在vue的專案裡,我們可以使用../這樣的相對路徑的方式引用不同目錄的元件:

import userinfo from '../../../components/userinfo.vue';

使用../引用的路徑比較深,定位路徑和書寫不方便,並且不直觀。

由於專案是基於webpack,比較好的做法是使用webpack對路徑定義乙個別名。

在webpack.base.config.js找到resolve節點,配置別名如下:

resolve: 

},

不同元件之間引用,如上面的示例:

import userinfo from '@components/userinfo.vue';

這樣引用就一目了然。

webpack建立vue專案

title webpack建立vue專案 tag webpack,vue,前端 歡迎檢視我的部落格 永無島 node v 10.4.0 npm v 6.1.0 檢視本專案原始碼請移步這裡 新建專案目錄 進入cmd,cmd目錄指定到專案目錄 mkdir myvuetest cd myvuetest 建...

webpack 構建簡單的vue專案

恢復內容開始 webpack主要執行流程 入口 loader處理 出口 webpack.config.js 檔案 const path require path 引入path模組 module.exports module resolve devserver 多檔案入口const htmlwebpa...

webpack構建vue專案深入

css css reset.css resetcss js js home home router router main.js mainjs view view index.html indexhtml package.json packagejson 配置webpack.config.js co...