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下的文件，這時我們就不能用上面這些相對路徑了的配置了，而必須使用一般的路徑方式方式。

項目設置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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

老生常談Vue中的偵聽器watch
開發(fā)中我們在data返回的對象中定義了數(shù)據(jù)，這個數(shù)據(jù)通過插值語法等方式綁定到template中，這篇文章主要介紹了Vue中的偵聽器watch,需要的朋友可以參考下
2022-10-10
vue3.x lodash在項目中管理封裝指令的優(yōu)雅使用
這篇文章主要為大家介紹了vue3.x lodash在項目中管理封裝指令的優(yōu)雅使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-09-09
vue結合echarts繪制一個支持切換的折線圖實例
這篇文章主要介紹了vue結合echarts繪制一個支持切換的折線圖實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
在vuex中有四大金剛分別是State， Mutations，Actions，Getters，本文對這四大金剛做了詳細介紹，本文重點是給大家介紹vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用，感興趣的朋友一起看看吧
2018-04-04
vue3??mark.js?實現(xiàn)文字標注功能(案例代碼)
這篇文章主要介紹了vue3??mark.js?實現(xiàn)文字標注功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-09-09
axios請求二次封裝之避免重復發(fā)送請求
在做vue中大型項目的時候,官方推薦使用axios,但是原生的axios可能對項目的適配不友好,所以在工程開始的來封裝一下axios,下面這篇文章主要給大家介紹了關于axios請求二次封裝之避免重復發(fā)送請求的相關資料,需要的朋友可以參考下
2022-10-10
基于Vue + Axios實現(xiàn)全局Loading自動顯示關閉效果
在vue項目中,我們通常會使用Axios來與后臺進行數(shù)據(jù)交互,而當我們發(fā)起請求時,常常需要在頁面上顯示一個加載框（Loading）,然后等數(shù)據(jù)返回后自動將其隱藏,本文介紹了基于Vue + Axios實現(xiàn)全局Loading自動顯示關閉效果,需要的朋友可以參考下
2024-03-03
vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)
所謂的vue-i18n國際化方案就是根據(jù)它的規(guī)則自己建立一套語言字典,對于每一個字（message）都有一個統(tǒng)一的標識符,下面這篇文章主要給大家介紹了關于vue3使用vue-i18n(ts中使用$t,?vue3不用this)的相關資料,需要的朋友可以參考下
2022-12-12
vuex中store.commit和store.dispatch的區(qū)別及使用方法
這篇文章主要介紹了vuex中store.commit和store.dispatch的區(qū)別及使用方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue使用babel-polyfill兼容IE解決白屏及語法報錯問題
這篇文章主要介紹了Vue使用babel-polyfill兼容IE解決白屏及語法報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03