jetbrain出品webstorm intellij等如何识别wepback项目别名@
Author:zhoulujun@live.cn Date:
Webpack经常会配置一些别名alias指向特定的目录,这样在使用 import 等语句时就不用写一大堆的相对路径了,常见的是将项目的src设置为 @,比如某文件的路径是 src/libs/util.js,配置后,任何地方就可以这样导入:
import util from '@/libs/util.js';//src/libs/util.js
但是,配置别名后,webstorm 或者intellij 不识别,按住command或者ctr 键点击也不会自动跳转。
2019版的能自动识别wepback配置文件,之前版本的需要手动配置。别入识别vue3.0 vue-cli 里面的webpack配置。
在setting -> languages&frameworks -> webpack里选择配置文件路径为 node_modules/@vue/cli-service/webpack.config.js即可。
因为:
webpack.config.js 原来是帮助webstorm来优化配置的,但是webstorm无法应对千奇百怪的架构变化,
分析实质其实就是利用了webpack.config.js中的 module.exports语法来分析alias路径,从而帮助我们解析文件。
所以我们只需要写一个JS文件和webpack.config.js相似,同时也module.export相同的参数即可。
第二种方案,
由于 Vue CLI 3 不再使用传统的 webpack 配置文件,导致 WebStorm 无法识别别名,需要手动创建一个 webpack 配置文件。
在项目根目录,创建一个 alias.config.js 文件,写入以下代码:
const resolve = dir => require('path').join(__dirname, dir) module.exports = { resolve: { alias: { '@': resolve('src') } } }
然后在 Languages & Frameworks - JavaScript - Webpack 里指定 webpack 配置文件。
参考文章:
jetbrains: webstorm如何识别webpack中的@等alias符号
在 WebStorm 中,配置能够识别 Vue CLI 3 创建的项目的别名 alias @
转载本站文章《jetbrain出品webstorm intellij等如何识别wepback项目别名@》,
请注明出处:https://www.zhoulujun.cn/html/tools/CodeEditor/intelliJ/2016_0215_4174.html
延伸阅读:
- intellij无法识别react语法
- Intellij IDEA Cannot Save Files ,mac os
- webstorm/intellij关于script标签的缩进问题
- webstrom,phpstorm,intellij不同步svn停止svn刷新消耗cpu
- intellij突然subversion不存在了,没有svn选项了……
- IntelliJ Idea创建新项目默认编码如何设置
- jetbrain IntelliJ IDEA配置nodejs环境-插件无法安装
- intellij无法启动及mac版intellij 2019.1.2版本 javaagent破解失效
- IntelliJ IDEA12怎么热部署,自动刷新页面图文教程
- intellij you can fromat your xml resources in the 'standard' andriod way.
- intellij keymap mac to windows,Mac OS X,Mac OS X 10.5+,
- IntelliJ IDEA 在使用Subversion进行版本管理时,怎么忽略某个文
- com.intellij.diagnostic.pluginexception: org/jetbrains/plugins/GradleLibrary
- intellij idea在mac os下文件过滤设置 ignore file and folders
- intelliJ提交代码到GitHub操作流程
- IntelliJ突然不支持es6,比如箭头函数报错
- mac下intellij添加php运行环境