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)
        }
      }
    }
  };

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

Answer 1

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

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

就这样，帮助我使用 PhpStorm

Answer 2

我失踪了extensions: ['.js', '.vue', '.json'],，在导入中我必须使用'@/components/...'

Answer 3

完整的例子：

const path = require("path");
const vueSrc = "./src";
module.exports = {
  runtimeCompiler: true,
  css: {
    modules: true
  },
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, vueSrc)
      },
      extensions: ['.js', '.vue', '.json']
    }
  }
};

尽管我不确定扩展是否可以解决您遇到的问题。如果您没有在导入定义中编写扩展名，这只会添加扩展名： https://webpack.js.org/configuration/resolve/#resolveextensions

我有一种感觉，这是失踪的问题/。因此，@components/Permissions/PermissionsTable应该是@/components/Permissions/PermissionsTable因为您没有/在vueSrc. 所以 webpack 只会./src像这样附加它：./srccomponents/Permissions/PermissionsTable。