vite打包vue组件库

这篇具有很好参考价值的文章主要介绍了vite打包vue组件库。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

本文讲的不是一步步搭建项目,然后如何规划好项目结构,文件夹命名等等,而是从一个整体中剥离出组件库。
首先我们的项目不是一开始就规划好了之后如何打包,都是一步步趟坑趟过来的,所以一开始的时候,我们是直接clone vue3的模板,然后就开搞了,中间我们还加了i18n、tailwind、多终端样式等等各种玩意,所以整个项目的components,views,api等等就都在一起,这是本文跟那些其他教程不一样的地方,然后,就是目前任务,拆分项目打包vue组件库

开始工作

建立组件库文件夹
  1. 建立两个文件夹,分别命名为core和view
  2. 将项目文件一股脑全部复制到两个文件夹,后面我们再慢慢将里面不属于当前目类的文件删掉就行
    vite打包vue组件库
  3. core文件夹下建立vite.lib.config.ts,与原vite.config.ts区别开,内容可参考其他人的教程,我这里是直接复制的vite.config.ts,然后将一些不能用的删掉,加上出口文件夹,入口文件夹,rollupoption等等
// 添加出口文件夹 lib(不需要手动创建,会自动生成)
const outDir = resolve(__dirname, '../view/lib')
 import WindiCSS from 'rollup-plugin-windicss'
…
plugins: [
      Vue(),
      VueJsx(),
      ...WindiCSS(),
]
 build: {
      lib: {
        entry: pathResolve('src/install.ts'),
        // 组件库名字
        name: 'my-components-base',
        fileName: 'my-components-base', //fileName: (format) => `tmes.${format}.js`,
        // 输出格式
        formats: ['es']
      },
      outDir,
      emptyOutDir: true,
      rollupOptions: {
        // 确保外部化处理那些你不想打包进库的依赖
        external: [
          'vue',
          'element-plus',
          '@element-plus/icons-vue',
          'lodash',
          'lodash-es',
          'vue-i18n',
          'vue3-i18n',
          'vue-router',
          'pinia',
          'pinia-plugin-persist',
          'mitt',
          'vue-types',
          'qs',
          'axios',
          'jquery',
          '@vueuse/core',
          'vue-types',
          'vuedraggable',
           //下面这些需要反向引用view中的文件,没做到全部解耦
          '@/config/axios',
          '@/config/axios/config',
 
          '@/utils/routerHelper',
 
          '@/store/modules/app',
          '@/store/modules/dict',
          '@/store/modules/locale',
          '@/store/modules/permission',
          '@/store/modules/singleton',
          '@/store/modules/tagsView',
 
          '@/hooks/web/useI18n', //i18n
          '@/hooks/web/useCache',
          '@/hooks/web/useLocale',
          '@/hooks/web/useAxios',
 
          '@/router'
        ],
        output: {
          // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
          globals: {
            vue: 'Vue',
            jquery: '$',
            'element-plus': 'ElementPlus'
          }
        }
      }
    }	 

我们没做到完全解耦,后面可能还会再弄一个资源,api,util等子模块
4. 建立install.ts,这个文件的路径与vite.lib.config.ts中入口文件的路径一致

//引入windicss
import 'virtual:windi.css'
// 加载 src/components 下全部 vue 文件
// const components = import.meta.globEager('./**/*.vue')
 
import { Icon } from './components/Icon/index'
import SvgIcon from './components/SvgIcon/index.vue'
import { Backtop } from './components/Backtop'
import { Breadcrumb } from './components/Breadcrumb'
import { Highlight } from './components/Highlight'
 
export {
  Icon,
  SvgIcon,
  Backtop,
  Highlight
}

前面尽量挑几个组件,其内部引用不多的,先尝试打包,不报错,且给view使用不报错的,再考虑打包更多
5. 修改package.json文件,在scripts中添加一行命令

 "scripts": {
    "lib": "vite build --config vite.lib.config.ts"
  },
  1. 运行npm lib打包,如果哪些文件中报什么引用错误的,先在vite.lib.config.ts的 rollupOptions.external 中加上这个引用,这样,这些引用在打包时跳过,而会在view引用lib时指向view目录下对应文件
  2. lib包的引用,因为我们在步骤3处,将导出文件夹指向view/lib文件夹,所以我们在view项目中文件中引用打包的js文件
    vite打包vue组件库

在main.ts中引入上style.css

//引入组件样式
import '@/../lib/style.css'
  1. 如果发现组件不显示,可能是组件中用到了element-plus组件,需要按需引入一下
    vite打包vue组件库

9.如果发现样式出现问题,一般是组件style中未使用scoped,或者drawer、dialog等使用了相同的 custom-class
vite打包vue组件库

10.组件增加要打包的组件,删除view项目components

结尾彩蛋

到此vite打包就算是结束了,但使用中会发现,component进行修改或调试时要频繁npm lib,痛苦指数飙升,所以我们下一节讲如何搭建pnpm-workspace环境文章来源地址https://www.toymoban.com/news/detail-481042.html

到了这里,关于vite打包vue组件库的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 记vite打包vue项目内存溢出问题解决

    出现问题 解决方法一: 1.根据网上的资料是通过全局下载npm包increase-memory-limit: 2.在项目目录执行命令: 3. 如果报错就搜索node_modules目录下的.bin目录中的 “%_prog%” 替换为 %_prog% 解决方法二(我的解决方法): 1.全局安装cross-env 2.在package.json的scripts中的build执行命令中增加

    2024年02月12日
    浏览(36)
  • vue3 vite 打包 二级目录刷新空白

    控制台报错:Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of \\\"text/html\\\". Strict MIME type checking is enforced for module scripts per HTML spec. 打包路径问题,修改vite.config.ts文件的base

    2024年02月09日
    浏览(56)
  • vue3 + vite 多项目多模块打包

    vue3 + vite 多项目多模块打包 本示例基于 vite-plugin-html 插件,实现多个独立项目共存,共享组件和依赖,运行、打包互不干扰。 兼容性注意 Vite 需要 Node.js 14.18+、16+版本,有些模板需要更高的版本 虽然创建项目用的14.17.5版本,但是后面运行项目用的18.15.0 HTML模板插件 打包一

    2024年02月10日
    浏览(66)
  • vite打包vue3项目白屏报错

    资源路劲问题 修改:vite.config.ts 原因是需要服务器进行静态资源访问,否则会因为跨域而报错 : Access to script at \\\'file:///F:/Progremes/Vue3/yanxuan_vue3_m_h5/dist/assets/index-49de958d.js\\\' from origin \\\'null\\\' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated

    2024年02月16日
    浏览(56)
  • vite vue3项目打包,跳过ts检查

    遇到这个问题是因为vue文件中script标签没有写lang造成的  剩下的ts类型检查错误  \\\"build\\\": \\\"vue-tsc --noEmit --skipLibCheck vite build\\\",是因为这个vue-tsc打包对ts进行了类型检查,需要全部解决了才行,可以关闭,直接改成\\\"build\\\": \\\"vite build\\\",

    2024年02月16日
    浏览(57)
  • vite vue3项目打包部署空白页面问题的处理

     问题:vite vue3项目打包部署上线后,发现是空白页面问题的处理 解决方法:1.在我们vite.config.js文件中检查是否有路径的指向                                       2.查看我们的路由模式,将路由模式修改为createWebHashHistory                           

    2024年02月11日
    浏览(58)
  • Vite打包Vue3项目,利用宝塔部署到服务器

    按照如图的配置,将vite.config.js的 base 改为  /dist/ 然后npm run build 就会得到左边的这个dist文件夹,这就是打包好的文件 创建项目以及项目配置 我在服务器安装的php是5.6版本的,其他版本可以自己试一下 解决刷新404问题 上传成功之后,文件目录结构是这样的 (顺序不一定要

    2024年04月13日
    浏览(80)
  • 【Vue3实践】(六)Vue3使用vite处理环境变量、打包部署、nginx配置

    由于在日常开发中会有一部分前端的开发任务,会涉及到Vue的项目的搭建、迭代、构建发布等操作,所以想系统的学习一下Vue相关的知识点,本专题会依照Vue的搭建、开发基础实践、进阶用法、打包部署的顺序进行记录。 历史文章链接如下: 《Vue3搭建、路由配置与基本语法

    2023年04月08日
    浏览(128)
  • 【Vue】Vite 组件化开发

    1. 什么是组件化开发 组件化开发指的是:根据封装的思想,把页面上可重用的部分封装为组件,从而方便项目的开发和维护。 例如:https://gitee.com/vdpadmin/variant-form 所展示的效果,就契合了组件化开发的思想。用户可以通过拖拽组件的方式,快速生成一个页面的布局结构。

    2024年02月10日
    浏览(47)
  • tauri+vite+vue3开发环境下创建、启动运行和打包发布

    目录  1.创建项目  2.安装依赖   3.启动项目  4.打包生成windows安装包   5.安装打包生成的安装包  运行下面命令创建一个tauri项目 我创建该项目时的node版本为16.15.0  兼容性注意 Vite 需要 Node.js 版本 14.18+,16+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你

    2024年01月19日
    浏览(83)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包