vite+vue3打包成一个js文件及使用方法

前言

在公司中有很多插件，以前是通过webpack打包的，打包成一个js文件，然后通过cdn方式引用。今天就来介绍下使用vite如何将一个项目打包成一个js文件。

打包准备

在准备好需要打包的组件后，在main.js中引入改根组件，然后再导出改组件，如下：

js 复制代码

// main.js

import helloword from './components/helloword.vue'

export default helloword

打包配置：

使用了 cssInjectedByJsPlugin插件将css打包进js中，引入的外部css文件需要在组件中import进来

js 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";

export default defineConfig({
  plugins: [vue(),cssInjectedByJsPlugin()], // 将 .css 和 .scss 文件打包进 JavaScript
  // 打包配置
  build: {
    lib: {
      entry: resolve(__dirname, './src/main.js'), // 设置入口文件【这里也可以直接引用插件.vue根组件】
      name: 'helloword', // 起个名字，安装、引入用
      fileName: (format) => `helloword.${format}.js`, // 打包后的文件名【可以自定义】
      formats:['umd']
    },
    sourcemap: false, // 输出.map文件
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue',
          helloword: 'helloword'   // 这里暴露出去一个全局变量
        }
      }
    }
  }
})

使用方式：

引入vue.js和打包后的js文件

js 复制代码

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="./dist/helloword.umd.js"></script>

组件使用

js 复制代码

<body>
 <div id="app">
   <helloword myValue="131232313" @btnClick="alert(13123213)" ></helloword> 
 </div>
 <script>
   Vue.createApp({ components: { 'helloword': helloword } }).mount('#app')
 </script>
</body>

渲染函数使用

js 复制代码

<body>
 <div id="app">
 </div>
 <script>
   // 创建一个 Vue 3 应用
   const app = Vue.createApp({
     // 在这里定义应用的选项
     render() {
       return Vue.h(helloword, {
         myValue: 'rearaseraserasr',
         onBtnClick: (value)=>{
           alert(value)
         }
         // 在这里可以传递任何 props 给组件
         // 例如: foo: 'bar'
       });
     }
   });
   // 挂载应用到指定dom
   app.mount('#app');
 </script>
</body>

这样就实现了vite打包成一个js文件啦。