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

Question

I have installed the project with vue cli 3 but as the project grows, the import on the components are getting ugly, i end up importing a component like

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

i just want to alias the src folder and do

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

i did read that i have to modify the vue.config.js, i have done it but the error is the same

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

this is my vue.config.js

  const path = require("path");

  const vueSrc = "./src";

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

am i missing something? what else should i do?

Answer 1

The complete example:

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']
    }
  }
};

Although I am not sure that extensions is the solution to the problem you had. This will just add the extensions in case you haven't written those in the import definition:https://webpack.js.org/configuration/resolve/#resolveextensions

I have a feeling it was rather a problem with the missing / . So instead of @components/Permissions/PermissionsTable it should have been @/components/Permissions/PermissionsTable because you did not add a / at the end of your vueSrc . So webpack will just attach it to ./src like this: ./srccomponents/Permissions/PermissionsTable .

Answer 2

我缺少extensions: ['.js', '.vue', '.json'],并且在导入中我必须使用 '@/components/...'

Answer 3

For Vue CLI you need to create a file in the root folder of project - jsconfig.json

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

and that's all, helped me with PhpStorm

Answer 4

You have

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

but you need

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