https://github.com/jwygithub/vue-cli-plugin-inject-alias
automatically generate alias based on path
https://github.com/jwygithub/vue-cli-plugin-inject-alias
alias vue
Last synced: 5 months ago
JSON representation
automatically generate alias based on path
- Host: GitHub
- URL: https://github.com/jwygithub/vue-cli-plugin-inject-alias
- Owner: jwyGithub
- License: mit
- Created: 2023-01-13T06:37:10.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-10-15T03:41:08.000Z (over 1 year ago)
- Last Synced: 2025-04-23T03:47:39.459Z (about 1 year ago)
- Topics: alias, vue
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vue-cli-plugin-inject-alias
- Size: 465 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
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
## 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';
```