2021年5月4日 星期二

Webstorm can't resolve module with vue-cli, setup webpack config for alias. 解決Webstorm無法解析路徑的問題

WebStorm can't resolve alias if project created by vue-cli.

Because vue-cli didn't set up via webpack, the alias can't resolved without webpack config.

To fix this problem, we can specify a webpack config for WebStorm to recognize alias.

[Setting] > [Language & Frameworks] > [JavaScript] > [Webpack]



Here are my references.

[1] https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000556284/comments/360000093780

[2] https://juejin.cn/post/6844903802185891848

[3] https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config


Updated

In unknown problem, all above action can't fix the resolution issue. But I found some trick: Go to any *.vue file, move to import block, right click on any component then install it. And it will solved. Unbeleible. Amazing.


Updated-2

No need to set webpack config because it always says: 
Can't analyse webpack.config.js: coding assistance will ignore module resolution rules in this file.
The rest current setting: node_module was excluded. src was rescouce root.
Rewritre vue.config.js, let it re-index, then it can resolved correctly.
I rewrite 

config.resolve.alias
.set('@img', path.resolve(__dirname, 'src/asset/images'))
.set('@common', path.resolve(__dirname, 'src/components/common'))
.set('Source', path.resolve(__dirname, 'src'));
to
config.resolve.alias
.
set('_img', path.resolve(__dirname, 'src/asset/images'))
.
set('_common', path.resolve(__dirname, 'src/components/common'))
.
set('Source', path.resolve(__dirname, 'src')); then re-write back
config.resolve.alias
.set('@img', path.resolve(__dirname, 'src/asset/images'))
.set('@common', path.resolve(__dirname, 'src/components/common'))
.set('Source', path.resolve(__dirname, 'src'));

Updated-3

[Setting] > [Language & Frameworks] > [JavaScript] > [Webpack]
=> Set as Automatic.


Select node_module folder, right click to popup menu, click "Optimize Imports"
=> it's work!

Or, select "src" root, do "Optimize Imports".
=> it's work!

Or, select any single *.vue, do "Optimize Imports".


[1] https://youtrack.jetbrains.com/issue/WEB-27933