vue3使用vite构建如何将组件导出让别人cdn引入?
发布网友
发布时间：2024-09-26 05:46
共1个回答
热心网友
时间：2024-09-28 02:30
cn.vitejs.dev/guide/build/#production-build
技术栈打包方式
vue-cli 自带的是 webpack 的打包方式，而 vite 使用 rollup 进行打包，体积更小。
vite 的库项目分为两类：
1. 纯 js 库项目
使用 vite 创建项目，编写 main.js 文件，确保只有一个出口文件。
2. 带 HTML 的库项目
纯 js 项目简单，只需 export 输出即可；带模板项目同样遵循此规则，使用 vite 创建项目，建立测试文件，设置入口文件。
设置 vite.config.js
根据项目需求在 vite.config.js 中配置打包设置，打包模式分为两种。
第三方插件处理
使用 external 配置将第三方插件代码以 import 方式引用，避免打包体积增加。
设置 package.json
发布 npm 资源包时，需遵循 npm 要求设置属性。避免自动安装第三方插件，需在 package.json 中删除 dependencies 和 devDependencies。
打包过程
使用 yarn build 进行打包，打包后文件结构清晰。
发布资源包到 npmjs.com
遵循官网步骤发布资源包，确保命名独特且避免重复。
安装资源包
使用 yarn 安装资源包，提高安装速度。确保 package.json 中的名称正确无误。
复合需求的项目
若项目既需作为库又需作为网站发布，可通过设置不同的 vite.config.js 来管理不同环境。
使用模式设置
建立 .env 文件，设置开发、测试/演示、库打包模式，根据模式返回对应的 vite.config.js 配置。
修改 package.json
设置执行命令时加入模式参数，确保不同环境的独立管理。
更改后的打包命令
各环境间独立操作，互不干扰，避免复杂注释。
CDN 访问
项目发布至 npmjs.com 后，可通过 https://unpkg.com/xxx 访问资源包，例如：https://unpkg.com/element-plus。
