Question

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

但是，我没有设法找到一种配置WebStorm的方法来理解这一点，并让我关注并检查使用该文件时是否存在该文件。

示例：

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

我想让WebStorm告诉我文件是否不存在，并允许我直接转到该文件。

我没有找到任何答案，也没有设法在IDE中找到解决方法。

Answer 1

对于vue-cli3，您需要在“设置” |“设置”中将node_modules/@vue/cli-service/webpack.config.js指定为webpack配置文件。语言和框架| JavaScript | Webpack 。注意，这仅适用于JavaScript。使用以TypeScript（WEB-34105）编写的组件时，无法解析webpack别名

Answer 2

在 phpstorm 2020.3.3 中，我可以通过

解决这个问题

打开设置 > 语言和框架 > JavaScript > Webpack 并选择“自动”
保存后，这会打开一个弹出窗口，要求运行 webpack 配置。点击“信任项目并运行”
已修复！

Answer 3

Webstorm已经supports resolving alias。 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')
        }
    }
};

然后作为webstorm配置文件。

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

4 个答案: