English | 简体中文

vue-cli-plugin-inject-alias

基于路径自动生成别名

特性

• 支持别名自定义
• 支持同步模式自定义配置

安装

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

配置项

export interface AutoAlias {
    /**
     * @description 别名生成的路径
     * @default src
     */
    root?: string;

    /**
     * @description 别名前缀
     * @default @
     */
    prefix?: string;

    /**
     * @description json同步模式
     * @default all
     */
    mode?: 'sync' | 'off';

    /**
     * @description 别名配置文件路径
     * @default tsconfig.json
     */
    aliasPath?: string;
}

关于 mode

• sync : 当使用sync时，插件会在当前项目的根目录中搜索tsconfig.json或jsconfig.json，因此请确保该文件存在于项目中。该插件将在运行时自动生成paths选项，然后将它们写入文件，而无需开发人员手动添加

vue.config.js

const { resolve } = require('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';
....