淺談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';
其中的路徑是相對于當前頁面的。 但是如果嵌套等更為復雜，那么寫起來會比較麻煩。但是如果我們通過這樣的配置：
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我們就可以直接引用了，而省去了一大堆的復雜應(yīng)用，另外通過@可以消除歧義。如下所示：
import Hello from '@components/Hello';
import App from '@pages/App'
值得注意的時： 在webpack.config.js中我們不能使用../ 以及./這種形式的路徑方式，而是通過 path.join 和 __dirname 這種形式來表示路徑，否則會報錯。
另外： 在組件中，我們會引用一些靜態(tài)文件，即static下的文件， 這時我們就不能用 alias 下的配置了，而必須使用一般的配置方式。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作分析
這篇文章主要介紹了Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作,結(jié)合實例形式分析了vue.js使用Watch針對數(shù)組、對象、變量監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue各種事件監(jiān)聽實例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
Vue2實現(xiàn)子組件修改父組件值的方法小結(jié)
在 Vue 2 中,子組件不能直接修改父組件的值,因為 Vue 遵循單向數(shù)據(jù)流的原則,為了實現(xiàn)子組件修改父組件的數(shù)據(jù),本文給大家介紹了Vue2實現(xiàn)子組件修改父組件值的四種方法,并通過代碼示例講解的非常詳細,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了Vue-cli項目部署到Nginx服務(wù)器的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
在前端開發(fā)中,權(quán)限管理是一項至關(guān)重要的任務(wù),本教程將深入探討如何在?Vue.js?項目中實施權(quán)限管理,并詳細講解如何實現(xiàn)到按鈕級別的細粒度控制,希望對大家有所幫助2024-11-11
這篇文章主要介紹了vue vant Area組件使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
vue如何使用html2canvas和JsPDF導出pdf組件
這篇文章主要介紹了vue如何使用html2canvas和JsPDF導出pdf組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
mitt又稱事務(wù)總線,是第三方插件,這篇文章主要為大家詳細介紹了Vue3中事件總線mitt的使用方式,感興趣的小伙伴可以跟隨小編一起學習一下2025-03-03
vue路由跳轉(zhuǎn)打開新窗口(window.open())和關(guān)閉窗口(window.close())
這篇文章主要介紹了vue路由跳轉(zhuǎn)打開新窗口(window.open())和關(guān)閉窗口(window.close())問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
三步搞定:Vue.js調(diào)用Android原生操作
這篇文章主要介紹了三步搞定:Vue.js調(diào)用Android原生操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09