Vue cli 3 project alias src to @ or ~/ not working

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?

A project generated with Vue CLI should already have that alias available without any additional configuration. — tony19
– tony19, Commented Mar 23, 2019 at 3:08
It’s built in to the CLI, can you try import Component from '@/components/folder/Component.vue'? — Alexander Staroselsky
– Alexander Staroselsky, Commented Mar 23, 2019 at 3:35

Vlad · Accepted Answer · 2021-04-13 13:37:33Z

12

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

answered Apr 13, 2021 at 13:37

Vlad

6197 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Noopur Phalak Over a year ago

This should actually be the correct answer...adding extensions to the vite configdoes not do anything.

Vlad Over a year ago

@NoopurPhalak, I didn't check how it works with Vite. With Vue 2.6 and @vue/cli 5.0.1 still working for for me. The question was asked more than 3 year ago, so probably you should find another solution.

Noopur Phalak Over a year ago

It works fine with vite as well. That is why I said, previously that this answer should be the accepted one. Actually even for @vue/cli this should have been the correct answer at that time...

Haiko · Accepted Answer · 2020-05-01 08:32:20Z

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.

Penny Liu · Accepted Answer · 2021-12-18 12:40:37Z

7

I was missing extensions: ['.js', '.vue', '.json'], and in the import I have to use '@/components/...'

edited Dec 18, 2021 at 12:40

Penny Liu

18k5 gold badges89 silver badges109 bronze badges

answered Mar 23, 2019 at 2:36

Carlos Salazar

1,9186 gold badges29 silver badges49 bronze badges

1 Comment

Benjamin Seche Over a year ago

Can you give your entire webpack configutation code so other people with same issue/question can rely on ? ty

Collectives™ on Stack Overflow

Vue cli 3 project alias src to @ or ~/ not working

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related