淺談vue路徑優(yōu)化之resolve
通過vue-cli來創(chuàng)建vue+webpack的項目時，已經(jīng)有很多都配置好了，但是路徑方面為了方便開發(fā)，還可以優(yōu)化。
1. resolve.extensions
在webpack.base.conf.js中，我們可以看到resolve配置，其中的extengsions是一個數(shù)組，如下所示：
extensions: ['.js', '.vue', '.json'],
通過這樣的配置，我們在組件中過著路由中應(yīng)用組件時，就可以更為方便的應(yīng)用，比如：
import Hello from '@components/Hello';
即Hello.vue這個組件我們不需要添加.vue后綴就可以引用到了，如果不用extensions， 我們就必須要用@components/Hello.vue來引入這個文件。
2. resolve.alias
在組件之間相互引用時，可能是下面這樣的：
import Hello from '../src.components/Hello';
其中的路徑是相對于當(dāng)前頁面的。 但是如果嵌套等更為復(fù)雜，那么寫起來會比較麻煩。但是如果我們通過這樣的配置：
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@pages': path.join(__dirname, "..", "src", "pages"),
"@components": path.join(__dirname, "..", "src", "components"),
// 注意： 靜態(tài)資源通過src，不能這么設(shè)置。
// "@assets": path.join(__dirname, "..", "src", "assets"),
}
其中vue$表示引入vue，就可以像下面這么寫：
import Vue from 'vue'
另外，對于@pages和@components我們就可以直接引用了，而省去了一大堆的復(fù)雜應(yīng)用，另外通過@可以消除歧義。如下所示：
import Hello from '@components/Hello';
import App from '@pages/App'
值得注意的時： 在webpack.config.js中我們不能使用../ 以及./這種形式的路徑方式，而是通過 path.join 和 __dirname 這種形式來表示路徑，否則會報錯。
另外： 在組件中，我們會引用一些靜態(tài)文件，即static下的文件， 這時我們就不能用 alias 下的配置了，而必須使用一般的配置方式。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文給大家介紹Vue3中setup()函數(shù)中聲明變量的幾種方法,希望本文能夠幫助你更好地理解Vue3的開發(fā)方式,感興趣的朋友跟隨小編一起看看吧2023-11-11
vue3使用vue-router及路由權(quán)限攔截方式
這篇文章主要介紹了vue3使用vue-router及路由權(quán)限攔截方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue.js的核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，它允許我們在普通 HTML 模板中使用特殊的語法將 DOM “綁定”到底層數(shù)據(jù)。被綁定的DOM 將與數(shù)據(jù)保持同步，每當(dāng)數(shù)據(jù)有改動，相應(yīng)的DOM視圖也會更新?；谶@種特性，通過vue.js動態(tài)綁定class就變得非常簡單。一起來看下吧2016-12-12
vuejs+element UI table表格中實現(xiàn)禁用部分復(fù)選框的方法
今天小編就為大家分享一篇vuejs+element UI table表格中實現(xiàn)禁用部分復(fù)選框的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
詳解Vue3.0 + TypeScript + Vite初體驗
這篇文章主要介紹了詳解Vue3.0 + TypeScript + Vite初體驗，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了Vue-resource安裝過程及使用方法解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
這篇文章主要為大家詳細介紹了基于Vue實現(xiàn)頁面切換左右滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家介紹了Avue?組件庫的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)PopupWindow組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
這篇文章主要介紹了Vue學(xué)習(xí)筆記之計算屬性與偵聽器用法,結(jié)合實例形式詳細分析了vue.js計算屬性與偵聽器基本功能、原理、使用方法及操作注意事項,需要的朋友可以參考下2019-12-12