如何让自定义及常用装饰器在Vue.js 2项目中全局免导入使用？

当然可行！针对你的场景，我整理了几个实用的方案，从简单配置到构建工具自动注入，适配不同的项目需求：

方案1：全局挂载 + TypeScript全局声明 #

这个方案通过把装饰器挂载到全局对象，并补充TypeScript类型声明，让所有组件直接使用：

步骤1：在入口文件全局导入并挂载 #

在项目的main.ts（或main.js）中，导入所有需要全局可用的装饰器，并挂载到globalThis（兼容浏览器和SSR环境）：

// main.ts
import { Vue, Component, Prop, Emit } from 'vue-property-decorator';
import { Getter } from 'vuex-class';
import { MyDecorator } from './src/utils';

// 挂载到全局对象
globalThis.Component = Component;
globalThis.Prop = Prop;
globalThis.Emit = Emit;
globalThis.Getter = Getter;
globalThis.MyDecorator = MyDecorator;

步骤2：补充全局类型声明 #

创建一个global.d.ts文件（放在项目根目录或src文件夹下），声明这些全局变量的类型，确保TypeScript能识别：

// global.d.ts
import type { ComponentDecorator, PropDecorator, EmitDecorator } from 'vue-property-decorator';
import type { Getter } from 'vuex-class';
import type { MyDecorator } from './src/utils';

declare global {
  const Component: ComponentDecorator;
  const Prop: PropDecorator;
  const Emit: EmitDecorator;
  const Getter: typeof Getter;
  const MyDecorator: typeof MyDecorator;
}

// 确保这个文件被视为模块
export {};

效果 #

现在你的组件可以完全省略导入语句，直接使用所有装饰器：

<script lang="ts">
@Component({})
export default class MyComponent extends Vue {
  @Getter('something', { namespace: 'whatever' }) something: number;

  mounted() {
    @MyDecorator() doSomething('do it please');
  }
}
</script>

方案2：统一导出 + 自动全局导入 #

这个方案通过创建一个装饰器统一导出文件，再利用TypeScript的配置让它自动全局可用，更符合模块化规范：

步骤1：创建统一装饰器导出文件 #

在src下新建decorators/index.ts，集中导出所有需要全局使用的装饰器：

// src/decorators/index.ts
export { Vue, Component, Prop, Emit } from 'vue-property-decorator';
export { Getter } from 'vuex-class';
export { MyDecorator } from '../utils';

步骤2：配置TypeScript自动导入 #

修改tsconfig.json，在compilerOptions中添加types配置，指向我们的装饰器文件（如果文件不在默认类型目录，可能需要调整路径）：

{
  "compilerOptions": {
    // 其他配置...
    "types": ["./src/decorators/index.ts"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}

或者，你也可以在global.d.ts中导入这个模块并声明全局变量，方式和方案1类似。

方案3：构建工具自动注入导入语句 #

如果你的项目用了Vue CLI或Vite，可以通过插件或自定义构建钩子，自动在Vue组件的脚本开头注入装饰器的导入语句，开发者完全感知不到导入过程：

Vite示例 #

在vite.config.ts中添加一个自定义插件：

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'inject-decorators',
      transform(code, id) {
        // 只处理Vue组件的TypeScript脚本
        if (id.endsWith('.vue') && code.includes('<script lang="ts">')) {
          return code.replace(
            '<script lang="ts">',
            '<script lang="ts">\nimport { Vue, Component, Prop, Emit, Getter, MyDecorator } from "@/decorators";'
          );
        }
        return code;
      }
    }
  ]
});

（注意：这里的@是Vite默认的路径别名，指向src目录，如果你没配置需要调整路径）

Vue CLI示例 #

在vue.config.js中使用chainWebpack添加自定义loader：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...options.compilerOptions,
          // 在脚本预处理时注入导入语句
          preprocessOptions: {
            typescript: {
              transform(code) {
                if (code.includes('@Component')) {
                  return `import { Vue, Component, Prop, Emit, Getter, MyDecorator } from "@/decorators";\n${code}`;
                }
                return code;
              }
            }
          }
        };
        return options;
      });
  }
};

注意事项 #

• SSR兼容性：如果你的项目是服务端渲染（比如Nuxt.js），避免直接使用window，改用globalThis来挂载全局变量。
• 类型安全：无论用哪种方案，都要确保TypeScript的类型声明正确，否则会出现编辑器报错或类型推断问题。
• Vue版本适配：如果是Vue 3 + Composition API，装饰器的使用方式可能略有不同，但全局可用的配置思路是一致的。

内容的提问来源于stack exchange，提问作者atiqorin