Vue.js - 配置 WebStorm 以在路径文件中设置 @ 到 src 文件夹

Question

在 Vue 中.js您可以使用路径文件中的@作为src文件夹的快捷方式。这很好，因为您的所有文件都有一个绝对路径。

但是，我无法找到一种方法来配置 WebStorm 来理解这一点，并允许我在使用它时关注并检查该文件是否存在。

例：

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

写下我希望 WebStorm 告诉我该文件是否存在并允许我直接转到该文件。

我没有设法找到任何关于它的答案，也没有设法在 IDE 中找到一种方法。

Answer 1

对于 vue-cli3，您需要在"设置"|中指定一个完整路径作为 webpack 配置文件node_modules/@vue/cli-service/webpack.config.js语言与框架 |JavaScript |网络包。

请注意，这仅适用于 JavaScript;当使用用 TypeScript 编写的组件时，不会解析 webpack 别名，应该使用tsconfig.json中的路径映射

Answer 2

在 phpstorm 2020.3.3 中，我可以通过以下方式解决此问题

• >打开 JavaScript> Webpack>语言和框架设置，然后选择"自动">
• 保存后，这将打开一个弹出窗口，要求运行 webpack 配置。点击"信任项目并运行">
• 固定！

Answer 3

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将自动解决它

Answer 4

vue-cli3 您可以选择 node_modules/@vue/cli-service/webpack.config.js 作为 webstorm 配置文件 设置> 语言和框架> JavaScript> Webpack。 或创建 webpack.config.js在根目录中，内容是

const resolve = dir => require('path').join(__dirname, dir);
module.exports = {
resolve: {
alias: {
'@': resolve('src')
}
}
};

然后作为网络风暴配置文件。