如何使用Vite打包Vue单文件组件以通过HTTPS加载？

我需要编译打包Vue单文件组件的可分发版本，用于通过HTTP动态加载。此前我查阅到Markus Oberlehner的文章，其中使用Vue CLI v3执行如下命令：

npx vue-cli-service build --target lib --formats umd-min --no-clean --dest server/components/MyComponent --name "MyComponent.[chunkhash]" server/components/MyComponent/MyComponent.vue

该命令可正常运行，但我希望改用Vite实现相同功能，请问是否可行？对应的等价命令是什么？

完全可以用Vite实现相同的打包效果，以下是具体的等价实现方式：

1. 基础命令与自定义配置结合 #

直接通过vite build命令配合自定义配置文件实现，基础命令如下：

vite build --config vite.lib.config.js

其中：

• --config指定单独的库打包配置文件，避免影响项目常规构建
• 核心配置都写在vite.lib.config.js中，对应原Vue CLI命令的各项参数

2. 自定义Vite配置文件（vite.lib.config.js） #

创建该配置文件，把原命令的参数映射为Vite的配置项：

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

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      // 对应原命令的入口文件路径
      entry: 'server/components/MyComponent/MyComponent.vue',
      // 对应原命令的--name
      name: 'MyComponent',
      // 对应原命令的--formats umd-min，配合下方minify实现压缩
      formats: ['umd'],
      // 对应原命令的带chunkhash的文件名规则
      fileName: (format) => `MyComponent.[chunkhash].${format}.min.js`
    },
    // 开启压缩，实现umd-min的min效果，需提前安装terser：npm install terser --save-dev
    minify: 'terser',
    // 对应原命令的--no-clean，不清理输出目录
    emptyOutDir: false,
    // 对应原命令的--dest，指定输出目录
    outDir: 'server/components/MyComponent'
  }
})

3. 简化执行方式 #

可以在项目的package.json中添加脚本命令，方便快速执行：

{
  "scripts": {
    "build:component": "vite build --config vite.lib.config.js"
  }
}

之后只需执行npm run build:component即可完成组件的库模式打包。

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