前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vite将vue3组件打包成sdk库文件方便其他环境使用

vite将vue3组件打包成sdk库文件方便其他环境使用

原创
作者头像
治电小白菜
修改2024-05-18 10:06:58
2670
修改2024-05-18 10:06:58
举报
文章被收录于专栏:技术综合技术综合

示例源码 https://github.com/klren0312/vue3sdkdemo

需求

可以封装一个方法, 在其他环境(比如vue2)中可以调用方法渲染vue3的组件

调用示例:

代码语言:js
复制
renderVueComponentToDOM(document.getElementById('app'), ...argument)

实现

1. 创建工程

使用vite创建, 选择vue

代码语言:shell
复制
pnpm create vite

2. 项目结构

3. 编写代码

核心是main.js, 组件就用默认的HelloWorld.vue

代码语言:js
复制
import { createApp } from 'vue'
import App from './components/HelloWorld.vue'

function renderVueComponentToDOM(domElement) {
  createApp(App).mount(domElement)
}

export default renderVueComponentToDOM

3. vite打包配置

因为是需要单独的当作sdk库使用, 所以需要把组件的css打包到js中

所以需要安装vite插件vite-plugin-css-injected-by-js

代码语言:shell
复制
pnpm add vite-plugin-css-injected-by-js -D

配置vite.config.js

代码语言:js
复制
import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
import { resolve } from 'path'
export default defineConfig({
  plugins: [
    vue(),
    cssInjectedByJsPlugin(),
  ],
  define: { 'process.env.NODE_ENV': '"production"' },
  build: {
    lib: {
      entry: resolve(__dirname, 'src/main.js'),
      name: 'sdk',
      fileName: 'sdk'
    }
  },
})

4. 打包使用

代码语言:shell
复制
pnpm build

可以在dist文件夹下看到打包后的文件

umd文件是给node用的 不需要

我们直接新建个index.html引入sdk.js进行测试

代码语言:html
复制
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" >
      import renderVueComponentToDOM from './dist/sdk.js'
      console.log(renderVueComponentToDOM)
      renderVueComponentToDOM(document.getElementById('app'))
    </script>
  </body>
</html>

可以看到正常渲染

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 需求
  • 实现
    • 1. 创建工程
      • 2. 项目结构
        • 3. 编写代码
          • 3. vite打包配置
            • 4. 打包使用
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档