如何构建可被其他Vue应用导入使用的Vue应用？

Hey there! Let's walk through how to turn your existing Vue app into a reusable library that other Vue projects can import. I've been through this process a few times, so here's a step-by-step breakdown tailored to your situation:

First, you need to make sure your key components are properly exported so other apps can import them. Create a new entry file (like src/index.js or src/lib/index.js) and export the components you want to share:

// src/index.js
import HeaderComponent from './components/HeaderComponent.vue'
import DataCard from './components/DataCard.vue'
import CustomButton from './components/CustomButton.vue'

// Export individual components for direct import
export { HeaderComponent, DataCard, CustomButton }

// Optional: Create an install function for Vue's plugin system
export default {
  install(app) {
    app.component('HeaderComponent', HeaderComponent)
    app.component('DataCard', DataCard)
    app.component('CustomButton', CustomButton)
  }
}

This lets users either import specific components or use app.use() to register all components globally in their Vue app.

Next, you need to adjust your build config to output a library instead of a full app. The setup depends on whether you're using Vite or Vue CLI (the two most common tools):

If using Vite #

Open your vite.config.js and update the build section to target library mode:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.js', // Path to your entry file
      name: 'MyVueLibrary', // Name of your library (used for UMD/IIFE builds)
      fileName: (format) => `my-vue-library.${format}.js`
    },
    rollupOptions: {
      // Exclude Vue from the bundle (let the consuming app provide it)
      external: ['vue'],
      output: {
        // Provide global variables for external dependencies (for UMD builds)
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

If using Vue CLI #

Open vue.config.js and add a configureWebpack section to set up library mode:

// vue.config.js
module.exports = {
  configureWebpack: {
    output: {
      library: 'MyVueLibrary',
      libraryTarget: 'umd'
    },
    externals: {
      vue: 'vue'
    }
  }
}

Now just run your regular build command. This will output reusable library files (usually in the dist/ folder):

npm run build

You'll see files like my-vue-library.es.js (ES module for modern apps) and my-vue-library.umd.js (UMD for older setups or direct browser use).

Before sharing, test it in another Vue app to make sure it works:

• In your library project, run npm link to create a local symlink.
• In the test Vue app, run npm link my-vue-library (replace with your library's name from package.json).
• Then import and use your components:

<!-- In test app's component -->
<template>
  <div>
    <HeaderComponent />
    <DataCard title="Test Card" />
  </div>
</template>

<script setup>
import { HeaderComponent, DataCard } from 'my-vue-library'
</script>

Or if you used the install function:

// main.js
import { createApp } from 'vue'
import MyVueLibrary from 'my-vue-library'
import App from './App.vue'

const app = createApp(App)
app.use(MyVueLibrary)
app.mount('#app')

If you plan to publish to npm or share the package, update your package.json with these fields:

• "main": "dist/my-vue-library.umd.js" (path to UMD build)
• "module": "dist/my-vue-library.es.js" (path to ES module build)
• "peerDependencies": { "vue": "^3.0.0" } (tells users they need Vue installed)

That's it! Your Vue app is now a reusable library that other projects can import and use. Let me know if you hit any snags along the way.

内容的提问来源于stack exchange，提问作者Antro