Vue.js如何将整个应用打包为单个JS文件 打包工具相关问题

1. Vue CLI 构建项目配置 #

修改项目根目录下的vue.config.js文件，配置如下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  productionSourceMap: false, // 关闭source map文件，减少产物体积
  css: {
    extract: false // 不单独提取CSS文件，样式直接嵌入JS
  },
  configureWebpack: {
    optimization: {
      splitChunks: false // 关闭代码分割，不生成独立的chunk文件
    },
    output: {
      filename: 'consent-manager.js', // 自定义打包后的文件名称
      libraryExport: 'default',
      library: 'ConsentManager', // 引入后全局挂载的变量名
      libraryTarget: 'umd' // 兼容不同场景的引入方式
    }
  }
})

配置完成后执行npm run build，dist目录下只会生成单个指定名称的JS文件。

2. Vite 构建项目配置 #

修改项目根目录下的vite.config.js文件，使用库模式打包：

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

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: './src/main.js', // 替换为你的项目入口文件路径
      name: 'ConsentManager',
      fileName: () => 'consent-manager.js',
      formats: ['umd']
    },
    cssCodeSplit: false, // 关闭CSS拆分，样式全部嵌入JS
    rollupOptions: {
      output: {
        inlineDynamicImports: true, // 关闭动态导入拆分，保证产物为单文件
      }
      // 如果你希望工具依赖使用者环境的Vue，不把Vue打包进产物，放开下方注释即可
      // external: ['vue'],
      // output: {
      //   globals: {
      //     vue: 'Vue'
      //   }
      // }
    }
  }
})

配置完成后执行npm run build即可得到单JS文件产物，不需要额外依赖，直接在页面body中引入就可以调用全局挂载的ConsentManager对象完成工具初始化，符合同意授权管理工具的使用场景。

内容的提问来源于stack exchange，提问作者Caio César P. Ricciuti