vue3+vite+ts 发布npm 组件包

1.创建项目

npm create vite@latest my-vue-ts-component -- --template vue-ts

可以强制把它变成公开包，发布
npm publish --access public

查看已发布包的元数据

npm view @zhy/map-utils

显示你当前 npm 客户端登录的「用户名」

npm whoami

2. 禁用 allowImportingTsExtensions

如果你不需要强制要求导入路径以 .ts 结尾，可以在 tsconfig.json 中禁用这个选项：
{
  "compilerOptions": {
    "allowImportingTsExtensions": false
  }
}

3.配置 Vite 打包为组件库模式

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'MyVueTsComponent',
      fileName: (format) => `my-vue-ts-component.${format}.js`,
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
});

4.确保 package.json 文件包含以下字段

{
  "name": "@your-username/my-vue-ts-component",
  "version": "1.0.0",
  "description": "A Vue 3 + TypeScript component template",
  "main": "./dist/my-vue-ts-component.umd.cjs",
  "module": "./dist/my-vue-ts-component.es.js",
  "files": [
    "dist"
  ],
  "peerDependencies": {
    "vue": "^3.0.0"
  },
  "scripts": {
    "build": "vue-tsc && vite build"
  }
}