Vue.js

Question

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

但是我没能找到一种方法来配置 WebStorm 来理解它并允许我在使用它时跟踪并检查文件是否存在。

示例：

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

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

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

Answer 1

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 2

对于vue-cli3，需要在设置中指定node_modules/@vue/cli-service/webpack.config.js的完整路径作为webpack配置文件|语言与框架 | JavaScript | Webpack.

请注意，这仅适用于 JavaScript；使用 TypeScript 编写的组件时，webpack 别名未解析，应使用 tsconfig.json 中的 path mappings 代替

Answer 3

vue-cli3 你可以 select node_modules/@vue/cli-service/webpack.config.js 作为 webstorm 配置文件 Settings > Languages & Frameworks > JavaScript > Webpack . 或者在根目录下创建webpack.config.js，内容为

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

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

然后作为webstorm的配置文件。

Answer 4

在 phpstorm 2020.3.3 中，我可以通过

解决这个问题

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

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

Vue.js - Configuring WebStorm to set @ in path files to the src folder

ide

webstorm