vue配置別名alias在webstorm不生效問題及解決
更新時間：2023年10月16日 14:19:39 作者：別搞花里胡哨的
這篇文章主要介紹了vue配置別名alias在webstorm不生效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue配置別名alias在webstorm不生效
今天在配置vue.config.js別名時,發(fā)現(xiàn)使用別名不生效,代碼沒有問題
最后發(fā)現(xiàn)是在webstorm的webpack配置問題,將webpack開啟自動即可
注 好像2019版本的webstorm沒有自動的選項,只有已禁用和手動的選項,2020的版本不知道,我用的是2021版本是有這三個選項
如果是沒有自動選項的版本的webstorm.可以在本地新建一個js文件,代碼如下,命名隨意,放置的磁盤隨意
const path = require('path')
module.exports = {
context: path.resolve(__dirname, './'),
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': path.resolve('src')
}
}
}
最后點(diǎn)擊手動加載剛才新建的js文件即可生效別名
webstorm 識別vue項目中的@路徑別名正確解析的配置方法
根目錄下新建webstorm.config.js，寫入
'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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
最近想要學(xué)習(xí)vue,正好看到資料,如何通過命令創(chuàng)建vue項目的方法,就留個筆記,下面這篇文章主要給大家介紹了關(guān)于vue項目啟動命令的相關(guān)資料,需要的朋友可以參考下2023-02-02
下面小編就為大家分享一篇vue父組件向子組件傳遞多個數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue 使用formData方式向后臺發(fā)送數(shù)據(jù)的實現(xiàn)
這篇文章主要介紹了Vue 使用formData方式向后臺發(fā)送數(shù)據(jù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue.js模版插值的原理與實現(xiàn)方法,結(jié)合實例形式簡單分析了vue.js模板插值的基本功能、原理、實現(xiàn)方法與注意事項,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue3屬性綁定方法解析，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
Vite+Vue3.0+ElementPlus+axios+TS搭建項目全過程
文章主要介紹了如何使用Vite構(gòu)建項目,包括創(chuàng)建項目、代碼規(guī)范（eslint、husky、prettti等等、EditorConfig配置等）,項目配置（CSS預(yù)處理器、樣式重置、環(huán)境變量配置、axios封裝、本地存儲封裝）和開發(fā)生產(chǎn)環(huán)境配置等內(nèi)容2026-04-04
Vscode關(guān)閉Eslint語法檢查的多種方式(保證有效)
eslint是一個JavaScript的校驗插件,通常用來校驗語法或代碼的書寫風(fēng)格,下面這篇文章主要給大家介紹了關(guān)于Vscode關(guān)閉Eslint語法檢查的多種方式,文章通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
關(guān)于vue中@click.native.prevent的說明
這篇文章主要介紹了關(guān)于vue中@click.native.prevent的說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
keep-alive是Vue中的一個內(nèi)置組件,用于緩存非活動組件實例,避免重復(fù)渲染,優(yōu)化性能,本文給大家介紹vue中的keep-alive用法指南,感興趣的朋友一起看看吧2024-10-10
這篇文章主要為大家詳細(xì)介紹了Vue.js實現(xiàn)立體計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02