vue @ ~ 相對路徑 路徑別名設(shè)置方式
@ ~ 相對路徑 路徑別名設(shè)置
- ./這是相對路徑的意思,同級目錄。
- ../上級目錄。
- @/這是webpack設(shè)置的路徑別名。在build/webpack.base.conf這個文件里面設(shè)置了@具體指的是什么
在build/webpack.base.conf里找到如下
resolve: { ? ? extensions: ['.js', '.vue', '.json'],//取消后綴 ?引入文件路徑就不用加文件后綴了 ? ? alias: { ? ? ? 'vue$': 'vue/dist/vue.esm.js', //引入vue ? ? ? '@': resolve('src'), ? ? ? 'asd': resolve('src/components/children'), //自己新建 要從src開始寫文件路徑 ? ? } ? },
使用 import heads from '@/components/children/heads'就不用頻繁的使用./和../了,而是利用@直接定位到了src目錄。
或者 import heads from 'asd/heads'
另外:在組件中,我們會引用一些靜態(tài)文件,即static下的文件, 這時我們就不能用上面這些相對路徑了的配置了,而必須使用一般的路徑方式方式。
項目設(shè)置src相對路徑為@
第一步 創(chuàng)建vue.config.js文件
第二步 添加代碼
const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { devServer: {}, chainWebpack: (config) => { config.resolve.alias .set('@', resolve('src')), .set('@u', resolve('src/utils')), "@c": resolve("src/components"), "@v": resolve("src/pages"), "@s": resolve("src/static"), "@u": resolve("src/utils") } }
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3.x lodash在項目中管理封裝指令的優(yōu)雅使用
這篇文章主要為大家介紹了vue3.x lodash在項目中管理封裝指令的優(yōu)雅使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09vue結(jié)合echarts繪制一個支持切換的折線圖實例
這篇文章主要介紹了vue結(jié)合echarts繪制一個支持切換的折線圖實例,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
在vuex中有四大金剛分別是State, Mutations,Actions,Getters,本文對這四大金剛做了詳細(xì)介紹,本文重點是給大家介紹vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用,感興趣的朋友一起看看吧2018-04-04vue3??mark.js?實現(xiàn)文字標(biāo)注功能(案例代碼)
這篇文章主要介紹了vue3??mark.js?實現(xiàn)文字標(biāo)注功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09基于Vue + Axios實現(xiàn)全局Loading自動顯示關(guān)閉效果
在vue項目中,我們通常會使用Axios來與后臺進(jìn)行數(shù)據(jù)交互,而當(dāng)我們發(fā)起請求時,常常需要在頁面上顯示一個加載框(Loading),然后等數(shù)據(jù)返回后自動將其隱藏,本文介紹了基于Vue + Axios實現(xiàn)全局Loading自動顯示關(guān)閉效果,需要的朋友可以參考下2024-03-03vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)
所謂的vue-i18n國際化方案就是根據(jù)它的規(guī)則自己建立一套語言字典,對于每一個字(message)都有一個統(tǒng)一的標(biāo)識符,下面這篇文章主要給大家介紹了關(guān)于vue3使用vue-i18n(ts中使用$t,?vue3不用this)的相關(guān)資料,需要的朋友可以參考下2022-12-12vuex中store.commit和store.dispatch的區(qū)別及使用方法
這篇文章主要介紹了vuex中store.commit和store.dispatch的區(qū)別及使用方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01Vue使用babel-polyfill兼容IE解決白屏及語法報錯問題
這篇文章主要介紹了Vue使用babel-polyfill兼容IE解決白屏及語法報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03