webstorm 解析vue-cli的别名路径（alias）

vue cli中配置的路径的别名，但是webstorm却无法识别，没办法自动提示路径和鼠标点击跳转的，解决方法如下：

在项目根目录中新建一个文件 .ide.alias.resovle.js

如果是多人共同开发建议将此文件添加到版本管理中，如果有的话：）

然后在文件中写入如下代码（自行修改代码中的别名和路径）：


module.exports = {

    resolve: {

        alias: {

            "@": require("path").resolve(__dirname, "src"),

            "a@": require("path").resolve(__dirname, "src/applications"),

            "m@": require("path").resolve(__dirname, "src/modules/public"),

            "s@": require("path").resolve(__dirname, "src/static/style"),

            "c@": require("path").resolve(__dirname, "src/components"),

            "module@": require("path").resolve(__dirname, "src/modules"),

        }

    }

};

然后打开webstorm，在菜单栏中打开settings：

image

然后在左侧找到 Languages & Frameworks > Javascript > Webpack 配置

然后在右侧 webpack configuration file 输入框中填写上面创建文件的 绝对路径，注意是 绝对路径

image

然后点击有下方 OK 按钮保存即可

开始享受vue的别名路径的自动提示以及ctrl+左键跳转功能吧

image