Awesome

vue-cli-plugin-auto-alias

A vue-cli plugin that automatically sets aliases. According to the rootDirName and then auto generated directory alias

English | 中文

Install

vue add vue-cli-plugin-auto-alias

or

vue add auto-alias

DefaultOptions

// vue.config.js
module.exports = {
  pluginOptions: {
    'vue-cli-plugin-auto-alias': {
      // rooot dir for auto gen alias
      rootDirName: 'src',
      // letter-case
      // support case: camelCase,capitalCase,constantCase,dotCase,headerCase,noCase,paramCase,pascalCase,pathCase,sentenceCase,snakeCase
      // https://www.npmjs.com/package/change-case
      case: 'pascalCase',
      // custom alias
      alias: {
        // just like a normal resolve in Webpack
        // test:path.resolve(__dirname,'test')
      },
    },
  },
}

Examples

If your directory structure as follows

|---node_modules
|---public
|---src/    # rootDir
    --- assets/
    --- components/
    --- router/
    --- store/
    --- views/
    --- custom-dir/
|--- package.json
|--- vue.config.js

and the options as follows

// vue.config.js
module.exports = {
  pluginOptions: {
    'vue-cli-plugin-auto-alias': {
      // rooot dir for auto generated alias
      rootDirName: 'src',
      // letter-case
      // support case: camelCase,capitalCase,constantCase,dotCase,headerCase,noCase,paramCase,pascalCase,pathCase,sentenceCase,snakeCase
      // https://www.npmjs.com/package/change-case
      case: 'pascalCase',
      // custom alias
      alias: {
        Public: path.resolve(__dirname, 'public'),
      },
    },
  },
}

and you will get webpack alias as follows

// vue inspect > output.js
{
   resolve: {
    alias: {
      '@': 'D:\\Workspace\\web-front-report\\src',
      vue$: 'vue/dist/vue.runtime.esm.js',

      // according to the rootDirName auto generated alias
      Assets: 'D:\\Workspace\\web-front-report\\src\\assets',
      Components: 'D:\\Workspace\\web-front-report\\src\\components',
      Router: 'D:\\Workspace\\web-front-report\\src\\router',
      Store: 'D:\\Workspace\\web-front-report\\src\\store',
      CustomDir: 'D:\\Workspace\\web-front-report\\src\\custom-dir',

      // custom alias
      Public: 'D:\\Workspace\\web-front-report\\public
    },
}

NPM

Show your support

Give a ⭐️ if this project helped you!

📝 License

Contributors ✨

Thanks goes to these wonderful people (emoji key):

<table> <tr> <td align="center"><a href="https://bryanadamss.github.io/"><img src="https://avatars3.githubusercontent.com/u/7441504?v=4" width="64px;" alt=""/><br /><sub><b>GuangHui</b></sub></a><br /><a href="#projectManagement-BryanAdamss" title="Project Management">📆</a></td> </tr> </table>

This project follows the all-contributors specification. Contributions of any kind welcome!