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

原创

治电小白菜

修改于 2024-05-18 10:06:58

2840

修改于 2024-05-18 10:06:58

文章被收录于专栏：技术综合技术综合

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

需求

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

调用示例:

renderVueComponentToDOM(document.getElementById('app'), ...argument)

实现

1. 创建工程

使用vite创建, 选择vue

pnpm create vite

2. 项目结构

3. 编写代码

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

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

pnpm add vite-plugin-css-injected-by-js -D

配置vite.config.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. 打包使用

pnpm build

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

umd文件是给node用的不需要

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

<!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>

可以看到正常渲染