Vue.js-配置WebStorm将@in路径文件设置为src文件夹

在Vue.js中，您可以使用路径文件中的

@

作为

src

文件夹的快捷方式。这很好，因为您的所有文件都有一个绝对路径

但是，我没有找到一种方法来配置WebStorm以理解这一点，并允许我在使用该文件时跟踪和检查该文件是否存在

例如：

import Business from '@/components/Business/Business'

我希望WebStorm告诉我该文件是否不存在，并允许我直接访问该文件

我没有找到任何关于它的答案，也没有找到在IDE中实现它的方法。Webstorm在后台阅读你的

webpack.config.js

如果您使用的是vue cli 3，我们没有

webpack.config.js

，但您可以手动创建

webpack.config.js

文件

module.exports = {
  resolve: {
    alias: {
      "@": require("path").resolve(__dirname, "src") // change this to your folder path
    }
  }
};

---

webstorm

将自动解析它

对于vue-cli3，您需要在设置|语言与框架| JavaScript |网页包中指定指向

节点|模块/@vue/cli service/webpack.config.js的完整路径作为网页包配置文件

注意，这只适用于JavaScript；当使用以TypeScript编写的组件时，不会解析网页包别名，应改为使用
tsconfig.json
vue-cli3。您可以选择node_modules/@vue/cli service/webpack.config.js作为webstorm配置文件设置>语言和框架>JavaScript>网页包。
或者在根目录中创建webpack.config.js，内容为

const resolve = dir => require('path').join(__dirname, dir);

module.exports = {
    resolve: {
        alias: {
            '@': resolve('src')
        }
    }
};

然后作为webstorm配置文件。
在phpstorm 2020.3.3中，我可以通过


打开设置>语言和框架>JavaScript>网页包并选择“自动”
保存后，将打开一个弹出窗口，要求运行webpack配置。单击“信任项目并运行”
修正
谢谢您的回答，但实际上webpack可以找到我的文件，我已经有了这样的配置。我的问题是，在webstorm中编写代码时，它确实能够找到并突出显示错误，当然不允许按住ctrl键并单击以访问文件并直接打开它：（检查此线程：什么对我有效（不要使用vue cli）：1）在IDE的设置中设置config webpack文件&2）对于.vue文件，我可以导入路径中没有.vue扩展名的组件，但是对于js文件，我仍然需要添加.vue以使他理解它。但那很好；）实际上，我没有使用vue cli，但我需要定义我的网页包配置文件，以使intelliJ在编码时理解my@的含义，因为它在绑定时起作用！谢谢！这个答案的另一个参考：是在2018年2月3日修复的。这个相对路径似乎对我不起作用-它只在我放置完整的绝对路径：/Users/.etc../MyProject/node_modules/@vue/cli service/webpack.config.js时起作用。知道如何使用项目相对路径导入它吗？我的Vue项目位于名为
client
的子文件夹中，因此为了使其工作，我必须使用以下命令：
$project\u DIR$/client/node\u modules/@Vue/cli service/webpack.config.js
在设置|语言与框架| JavaScript | webpack中。工作得很有魅力。谢谢@lena！！