Vue cli 3项目别名src到@或~/不起作用

Question

我已经用 vue cli 3 安装了项目，但是随着项目的增长，组件的导入变得越来越难看，我最终导入了一个像

import Component from '../../../../components/folder/Component.vue'

我只想给 src 文件夹起别名并执行

import Component from '@components/folder/Component.vue'

我确实读过我必须修改 vue.config.js ，我已经做到了，但错误是一样的

Module not found: Error: Can't resolve '@components/Permissions/PermissionsTable'

这是我的 vue.config.js

   const path = require("path");

  const vueSrc = "./src";

  module.exports = {
    runtimeCompiler: true,
    css: {
      modules: true
    },
    configureWebpack: {
      resolve: {
        alias: {
          "@": path.join(__dirname, vueSrc)
        }
      }
    }
  };

我错过了什么吗？我还应该做什么？

原文由 Carlos Salazar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于 Vue CLI，您需要在项目的根文件夹中创建一个文件 - jsconfig.json

 {
  "include": ["./src/**/*"],
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "exclude": ["node_modules"]
}

这就是全部，帮助我使用 PhpStorm

原文由 Vlad 发布，翻译遵循 CC BY-SA 4.0 许可协议