vue配置別名alias在webstorm不生效問(wèn)題及解決

更新時(shí)間：2023年10月16日 14:19:39 作者：別搞花里胡哨的

這篇文章主要介紹了vue配置別名alias在webstorm不生效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue配置別名alias在webstorm不生效

今天在配置vue.config.js別名時(shí),發(fā)現(xiàn)使用別名不生效,代碼沒(méi)有問(wèn)題

最后發(fā)現(xiàn)是在webstorm的webpack配置問(wèn)題,將webpack開(kāi)啟自動(dòng)即可

注好像2019版本的webstorm沒(méi)有自動(dòng)的選項(xiàng),只有已禁用和手動(dòng)的選項(xiàng),2020的版本不知道,我用的是2021版本是有這三個(gè)選項(xiàng)

如果是沒(méi)有自動(dòng)選項(xiàng)的版本的webstorm.可以在本地新建一個(gè)js文件,代碼如下,命名隨意,放置的磁盤(pán)隨意

const path = require('path')

module.exports = {
  context: path.resolve(__dirname, './'),
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': path.resolve('src')
    }
  }
}

最后點(diǎn)擊手動(dòng)加載剛才新建的js文件即可生效別名

webstorm 識(shí)別vue項(xiàng)目中的@路徑別名正確解析的配置方法

根目錄下新建webstorm.config.js，寫(xiě)入

'use strict'
const path = require('path')
 
function resolve (dir) {
  return path.join(__dirname, '.', dir)
}
 
module.exports = {
  context: path.resolve(__dirname, './'),
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      '_c': resolve('src/components')
    }
  }
}

然后導(dǎo)入到webstorm下即可，如下圖

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

vue3使用particles插件實(shí)現(xiàn)粒子背景的方法詳解
這篇文章主要為大家詳細(xì)介紹了vue3使用particles插件實(shí)現(xiàn)粒子背景的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-03-03
uni-app無(wú)限級(jí)樹(shù)形組件簡(jiǎn)單實(shí)現(xiàn)代碼
文章介紹了如何在uni-app中簡(jiǎn)單封裝一個(gè)無(wú)限級(jí)樹(shù)形組件,該組件可以無(wú)線嵌套,展開(kāi)和收縮,并獲取子節(jié)點(diǎn)數(shù)據(jù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2025-01-01
vue腳手架搭建過(guò)程圖解
vue腳手架是個(gè)好東西，能夠快速搭建vue單頁(yè)面應(yīng)用，vue是基于node環(huán)境的，所以要先安裝node。下面通過(guò)圖文并茂的形式給大家介紹vue腳手架搭建過(guò)程圖解，感興趣的朋友一起看看吧
2018-06-06
Vue3快速實(shí)現(xiàn)文件上傳OSS的方法詳解
這篇文章給大家介紹了Vue3快速實(shí)現(xiàn)文件上傳OSS的方法,上傳文件可以說(shuō)是經(jīng)典的需求了,在后臺(tái)管理項(xiàng)目中隨處可見(jiàn),一般是由前端進(jìn)行文件上傳,然后再由后端去處理,本文旨在實(shí)現(xiàn)上傳功能,不考慮額外的功能（如文件尺寸限制）,感興趣的朋友可以參考下
2024-01-01
基于vue編寫(xiě)一個(gè)月餅連連看游戲
中秋節(jié)快要到啦,我們一起用Vue創(chuàng)建一個(gè)簡(jiǎn)單的連連看游戲,連連看大家一定都玩過(guò)吧,通過(guò)消除相同的圖案來(lái)清理棋盤(pán),小編將一步步引導(dǎo)大家完成整個(gè)游戲的制作過(guò)程,讓我們開(kāi)始吧,一起為中秋節(jié)增添一些互動(dòng)和娛樂(lè)
2023-09-09
vue滾動(dòng)插件better-scroll使用詳解
這篇文章主要為大家詳細(xì)介紹了vue滾動(dòng)插件better-scroll，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
這篇文章主要介紹了VUE中V-IF條件判斷改變?cè)氐臉邮讲僮?，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨想過(guò)來(lái)看看吧
2020-08-08