Vue-cli: how to set alias

[stack-Yaffel]

What problem does this feature solve?

what should i do when i need to set a alias like '@' same as 'src' ?

What does the proposed API look like?

i need cli-2.0 resolve setting

[sirlancelot]

You can add it to the Webpack config by placing your aliases in the vue.config.js file as shown here: https://cli.vuejs.org/guide/webpack.html#simple-configuration

[sodatea]

GitHub issues are for bug reports & feature requests only.
Next time please consider using forums for questions: https://forum.vuejs.org/c/chinese

---

Such aliases are already set.
https://github.com/vuejs/vue-cli/blob/ff57b8f55fa69873f643e418cfe6d4842d7c7674/packages/%40vue/cli-service/lib/config/base.js#L49-L50

You can use configureWebpack or chainWebpack in vue.config.js to set your own aliases.

[komali2]

@sirlancelot

Your solution doesn't appear to work:

vue.config.js

const path = require('path');
module.exports = {
    resolve: {
        alias: {
            '@': path.join(__dirname, 'client/src/')
        }
    }
}

Error:

ERROR Invalid options in vue.config.js: "resolve" is not allowed

vue.config.js

const path = require('path');
module.exports = {
    alias: {
        '@': path.join(__dirname, 'client/src/')
    }
}

Error:

ERROR Invalid options in vue.config.js: "alias" is not allowed

@sodatea that solution doesn't work, my files are separated into a client/ and api/ folder, and I have to launch the cli with a custom entrypoint in the commandline, like so:

"serve:ui": "vue-cli-service serve client/src/main.js",

[komali2]

Context option also doesn't work

vue.config.js

const path = require('path');
module.exports = {
    context: path.resolve(__dirname, './client'),
}

ERROR Invalid options in vue.config.js: "context" is not allowed

[komali2]

Seems the solution is something along the lines of:

vue.config.js

const path = require('path')
module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('@', path.resolve(__dirname, 'client/src'));
  }
}

as per

https://cli.vuejs.org/guide/webpack.html#chaining-advanced

https://forum.vuejs.org/t/vue-cli-3-0/39055/6

[ajcastro]

This works

// vue.config.js
const path = require('path');
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "~": path.resolve(__dirname, 'src/')
      }
    }
  }
}

[jpcbdev]

If you use vue create cli just use '@/...' by default this resolve the path ./src, so in my case i need resolve the file store.js in src then i add this line: import store from '@/store.js';

[BetaLeev]

I have done that success with

 chainWebpack: config => {
        config.resolve.alias
            .set('api', path.resolve(__dirname, 'src/api'));
    },

[abdulladev1995]

While investigating this issue I have solved it like below and want to share others. Here are my vue.config.js file to support alias.

var path = require('path');

module.exports = {
    chainWebpack: config => {
        //this path is specific to my project
        config.resolve.alias.set('styles', path.resolve('src/assets/styles')); 
    },
};

And use it in Vue component with alias version (alias loading only worked with "~" but not with "@" sign):

<style lang="scss">
    @import "~styles/main";
    ...

</style>

[Archsx]

While investigating this issue I have solved it like below and want to share others. Here are my vue.config.js file to support alias.

var path = require('path');

module.exports = {
    chainWebpack: config => {
        //this path is specific to my project
        config.resolve.alias.set('styles', path.resolve('src/assets/styles')); 
    },
};

And use it in Vue component with alias version (alias loading only worked with "~" but not with "@" sign):

<style lang="scss">
    @import "~styles/main";
    ...

</style>

dude,It solved my problem.but can you tell me where did you find the solution?

[abdulladev1995]

dude,It solved my problem.but can you tell me where did you find the solution?

It is great to hear I have helped somebody. I have searched about this issue and tried multiple variants but any of helped me to specify directory based aliasing. So I want to give up after a lot of researching. But I did one last try and it worked!

[Dinuz]

@abdulladev1995 you rock man! It solved the crappy ../../../ so glad:)))
Thank you

PS if you are using pycharm or webstorm don't forget to mark the assets directory as source

[FrankFang]

For WebStorm users: Dont forget to configure this.

[Robula]

Why is this issue closed? Vetur still can't properly infer custom paths.

[sean-hill]

I resolved my issue by adding in a jsconfig.json file at the root of my projects directory.

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

[ctsstc]

Seems to not work with monorepos, but this may be more applicable and open: https://github.com/vuejs/vetur/issues/762