vue配置别名alias在webstorm不生效问题及解决
vue配置别名alias在webstorm不生效
今天在配置vue.config.js别名时,发现使用别名不生效,代码没有问题
最后发现是在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') } } }
最后点击手动加载刚才新建的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') } } }
然后导入到webstorm下即可,如下图
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
大前端代码重构之事件拦截iOS Flutter Vue示例分析
这篇文章主要为大家介绍了大前端代码重构之事件拦截iOS Flutter Vue示例分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-04-04element-ui el-select下拉框el-date-picker弹出框定位问题解决方案(推荐)
项目开发过程中发现el-select和el-date-picker弹出框显示时候,滚动屏幕,导致弹出框定位出现问题,这篇文章主要介绍了element-ui el-select下拉框el-date-picker弹出框定位问题解决方案(推荐),需要的朋友可以参考下2024-07-07使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
这篇文章主要介绍了用vue官方提供的模板vue-cli搭建一个helloWorld案例,需要的朋友可以参考下2018-01-01
最新评论