vue项目umd打包

### Vue 项目 UMD 打包配置与实现

为了在 Vue 项目中创建 UMD (Universal Module Definition) 构建版本，可以利用 Webpack 进行自定义配置。这使得构建后的文件可以在多种环境中使用，无论是通过 `<script>` 标签引入还是作为模块加载。

#### 创建 Webpack 配置文件

在项目的根目录下创建 `webpack.config.js` 文件[^1]：

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  entry: './src/index.js', // 主入口文件路径
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.umd.js',
    libraryTarget: 'umd',
    globalObject: 'this'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm-bundler.js' // 使用完整版 Vue
    }
  }
};

此配置指定了输出库的目标环境为 UMD，并设置了全局对象为 `'this'` 来兼容不同类型的上下文。同时，针对 `.vue` 单文件组件应用了相应的加载器处理逻辑。

#### 修改 package.json 脚本命令

为了让打包过程更加便捷，在 `package.json` 中添加或修改脚本来触发 Webpack 编译流程：

{
  "scripts": {
    "build-umd": "webpack --config webpack.config.js"
  }
}

执行上述命令将会依据指定的 Webpack 设置来编译源码并生成适用于 UMD 的 JavaScript 文件。

#### 启动开发服务器（可选）

如果希望测试打包效果而不必每次都正式发布，则可在特定目录如 `single-spa-demo-root-config` 下启动本地服务来进行预览[^2]：

yarn start

该操作通常会在端口 9000 上提供一个简单的 HTTP 服务器用于展示成果。