vue-cli-plugin-inject-alias

English | 简体中文

vue-cli-plugin-inject-alias

automatically generate alias based on path

Features

• Support for custom alias prefixes
• Supports synchronous mode configuration

Install

with pnpm

pnpm add vue-cli-plugin-inject-alias -D

with yarn

yarn add vue-cli-plugin-inject-alias -D

with npm

npm install vue-cli-plugin-inject-alias -D

with vue

vue add vue-cli-plugin-inject-alias

Option

export interface AutoAlias {
    /**
     * @description the root directory where the alias needs to be generated is src by default
     * @default src
     */
    root?: string;

    /**
     * @description prefix for generating aliases
     * @default @
     */
    prefix?: string;

    /**
     * @description synchronize the mode of json configuration
     * @default all
     */
    mode?: 'sync' | 'off';

    /**
     * @description alias configuration file path
     * @default tsconfig.json
     */
    aliasPath?: string;
}

Mode

• sync : when use sync,the plugin will search for tsconfig.json or jsconfig.json in the root directory of the current project, so please ensure that this file exists in the project. The plugin will automatically generate paths options when running, and then write them to the file without the need for developers to manually add them

vue.config.js

const { resolve } = require('node:path');
module.exports = defineConfig({
    // other config
    transpileDependencies: true,
    pluginOptions: {
        'vue-cli-plugin-inject-alias': {
            mode: 'sync',
            prefix: '@',
            root: resolve(__dirname, './src'),
            aliasPath: path.resolve(__dirname, './tsconfig.json')
        }
    }
});

tsconfig.json / jsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./"
        // ...
    }
}

example

|-- src
    |-- plugins
    |-- router
    |-- scss
    |-- store
    |-- utils
    |-- views
    |-- ....

// import xxx from '@plugins/xxx';
// import xxx from '@router/xxx';
// import xxx from '@scss/xxx';
// import xxx from '@store/xxx';
// import xxx from '@utils/xxx';
// import xxx from '@views/xxx';