vue @ ~ 相對(duì)路徑路徑別名設(shè)置方式

更新時(shí)間：2022年06月05日 09:54:59 作者：a57521

這篇文章主要介紹了vue @ ~ 相對(duì)路徑路徑別名設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

@ ~ 相對(duì)路徑路徑別名設(shè)置

./這是相對(duì)路徑的意思，同級(jí)目錄。
../上級(jí)目錄。
@/這是webpack設(shè)置的路徑別名。在build/webpack.base.conf這個(gè)文件里面設(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開(kāi)始寫(xiě)文件路徑
? ? }
? },

使用 import heads from '@/components/children/heads'就不用頻繁的使用./和../了，而是利用@直接定位到了src目錄。

或者 import heads from 'asd/heads'

另外：在組件中，我們會(huì)引用一些靜態(tài)文件，即static下的文件，這時(shí)我們就不能用上面這些相對(duì)路徑了的配置了，而必須使用一般的路徑方式方式。

項(xiàng)目設(shè)置src相對(duì)路徑為@

第一步創(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")

  }
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue自適應(yīng)布局postcss-px2rem詳解
這篇文章主要介紹了vue自適應(yīng)布局（postcss-px2rem）的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2022-05-05
Vue源碼makeMap函數(shù)深入分析
vue源碼中的makeMap用在很多地方，主要是判斷標(biāo)簽是原生標(biāo)簽還是用戶(hù)自定義的組件，但是標(biāo)簽很多，如果每判斷一次都執(zhí)行一次循環(huán)，累計(jì)下來(lái)，性能損耗還是很大的，makeMap就是解決這個(gè)問(wèn)題出現(xiàn)的
2022-08-08
vue router 配置路由的方法
這篇文章主要介紹了vue router 配置路由的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
詳解vue 組件
這篇文章主要介紹了詳解vue 組件的相關(guān)知識(shí)，文中講解非常細(xì)致，代碼供大家參考學(xué)習(xí)，感興趣的朋友可以了解下
2020-06-06
Vue+OpenLayer實(shí)現(xiàn)測(cè)距功能
OpenLayers?是一個(gè)專(zhuān)為Web?GIS?客戶(hù)端開(kāi)發(fā)提供的JavaScript?類(lèi)庫(kù)包，用于實(shí)現(xiàn)標(biāo)準(zhǔn)格式發(fā)布的地圖數(shù)據(jù)訪(fǎng)問(wèn)。本文將通過(guò)Vue和OpenLayer實(shí)現(xiàn)測(cè)距功能?，需要的可以參考一下
2022-04-04
Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)系統(tǒng)的使用
這篇文章主要介紹了Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)系統(tǒng)的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
el-tooltip根據(jù)條件控制顯示的示例代碼
這篇文章主要介紹了el-tooltip根據(jù)條件控制顯示的示例代碼,包括列表型和樹(shù)狀圖型,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-12-12
vue ssr 實(shí)現(xiàn)方式(學(xué)習(xí)筆記)
這篇文章主要介紹了vue ssr 實(shí)現(xiàn)方式(學(xué)習(xí)筆記)，本文不涉及到源碼解析，主要講解如何實(shí)現(xiàn) vue 的服務(wù)端渲染，比較適合 vue-ssr 小白閱讀，感興趣的小伙伴們可以參考一下
2019-01-01
Vue響應(yīng)式原理的示例詳解
Vue 最獨(dú)特的特性之一，是非侵入式的響應(yīng)系統(tǒng)。數(shù)據(jù)模型僅僅是普通的 JavaScript 對(duì)象。而當(dāng)你修改它們時(shí)，視圖會(huì)進(jìn)行更新。本文將通過(guò)示例詳解Vue的響應(yīng)式原理，感興趣的可以了解一下
2022-03-03
在Vue3項(xiàng)目中安裝和配置Three.js的操作代碼
Three.js是一個(gè)輕量級(jí)的WebGL封裝庫(kù),用于在瀏覽器中渲染復(fù)雜的3D圖形,它提供了便捷的API,可以快速構(gòu)建3D場(chǎng)景、對(duì)象和動(dòng)畫(huà),Vue.js是一個(gè)漸進(jìn)式JavaScript框架,擅長(zhǎng)構(gòu)建用戶(hù)界面,本文給大家介紹了在Vue3項(xiàng)目中安裝和配置Three.js的操作,需要的朋友可以參考下
2024-12-12