利用vite构建插件vite-plugin-singlefile将vue项目打包成单个文件

vite-plugin-singlefile

在使用electron开发一款桌面应用时，需要将前端项目打包成一个本地的单个HTML文件，之前用的是React，这个项目前端使用的是vue框架，于是去搜了一下vue项目是如何打包的，发现一个很好用的插件：vite-plugin-singlefile，它允许你将所有的JavaScript和CSS资源直接内联到最终的dist/index.html文件中，使得一个完整的web应用可以作为单一HTML文件分发。

安装依赖

npm i vite-plugin-singlefile
npm i unplugin-auto-import
npm i unplugin-vue-components

配置vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {viteSingleFile} from "vite-plugin-singlefile";
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import {ElementPlusResolver} from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteSingleFile(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  build: {
    minify: false,
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)) 
    }
  }
})

执行打包命令

npm run build

在dist文件里会生成一个html文件，可以在离线、无服务器支持的情况下直接运行web应用程序。
参考链接1： blog.csdn.net/gitblog_000…

参考连接2： www.cnblogs.com/grovee/p/17…