# vue-cli-plugin-inject-alias

> automatically generate alias based on path

Latest version **1.0.5** (published 2024-10-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-cli-plugin-inject-alias
pnpm add vue-cli-plugin-inject-alias
yarn add vue-cli-plugin-inject-alias
bun add vue-cli-plugin-inject-alias
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2024-10-15 |
| First published | 2023-01-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | jiangweiye |
| Maintainers | jiangweiye |
| Keywords | vue, vue-cli, vue-cli-plugin, vue-cli-plugin-alias, alias |

## Links

- npm: https://www.npmjs.com/package/vue-cli-plugin-inject-alias
- Homepage: https://github.com/jwyGithub/vue-cli-plugin-inject-alias
- npm.io page: https://npm.io/package/vue-cli-plugin-inject-alias

## Recent versions

- 1.0.5 (latest) — 2024-10-15
- 1.0.4 — 2024-05-29
- 1.0.3 — 2024-05-07
- 1.0.2 — 2024-03-14
- 1.0.1 — 2024-03-11
- 1.0.0 — 2024-02-06
- 0.0.19 — 2024-01-25
- 0.0.18 — 2023-12-06
- 0.0.17 — 2023-11-07
- 0.0.16 — 2023-09-14
- 0.0.15 — 2023-09-08
- 0.0.14 — 2023-08-17
- 0.0.12 — 2023-07-31
- 0.0.11 — 2023-07-07
- 0.0.9 — 2023-04-23
- … 7 more at https://npm.io/package/vue-cli-plugin-inject-alias/versions

## README

English | [简体中文](https://github.com/jwyGithub/vue-cli-plugin-inject-alias/blob/master/README.zh.md)

# vue-cli-plugin-inject-alias

automatically generate alias based on path

<p align="center">
  <img src="https://img.shields.io/npm/v/vue-cli-plugin-inject-alias" alt='version'>
  <img src="https://img.shields.io/npm/dm/vue-cli-plugin-inject-alias" alt='download'>
  <img src="https://img.shields.io/github/issues/jwyGithub/vue-cli-plugin-inject-alias" alt='issues'>
  <img src="https://img.shields.io/github/license/jwyGithub/vue-cli-plugin-inject-alias" alt='license'>
</p>
<br />

## Features

-   Support for custom alias prefixes
-   Supports synchronous mode configuration

## Install

### with pnpm

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

### with yarn

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

### with npm

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

### with vue

```sh
vue add vue-cli-plugin-inject-alias
```

## Option

```typescript
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

```javascript
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

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

## example

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

```javascript
// 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';
```

---
_Source: https://npm.io/package/vue-cli-plugin-inject-alias · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._