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

完整的示例：

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。

Answer 2

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

Answer 3

你有

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

但您需要

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

Answer 4

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

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

仅此而已，帮助我使用 PhpStorm

Vue CLI 3项目别名src到@或〜/不起作用

4 个答案: