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"
}
}