如何将Vite构建的Vue.js应用打包为单文件Figma插件

• 资源引用路径为绝对路径：Vite默认打包生成的资源路径是/开头的绝对路径，Figma插件加载本地HTML文件时，不会以dist目录作为根路径解析，导致所有静态资源加载失败，抛出<link rel=modulepreload> has no 'href' value警告本质是预加载的资源找不到，路径解析失效。
• vite-plugin-singlefile未正确配置所以不生效：你之前的配置中没有引入和注册该插件，也没有开启对应的构建参数。

步骤1：安装必要依赖 #

先安装单文件打包插件：

npm install vite-plugin-singlefile --save-dev

步骤2：修改vite.config.js配置 #

修改后的完整配置如下：

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

export default defineConfig(({command, mode }) => {
  return {
    assetsDir: 'res',
    // 配置相对路径，保证资源在本地加载时能正确找到
    base: './',
    plugins: [
      vue(),
      // 注册单文件打包插件
      viteSingleFile()
    ],
    root: 'src',
    build: {
      emptyOutDir: true,
      outDir: '../dist',
      // 把所有小于10MB的资源都内联到HTML中，避免生成额外的资源文件，完全符合单文件要求
      assetsInlineLimit: 1024 * 1024 * 10,
      // 禁用modulepreload避免不必要的警告
      modulePreload: false
    }
  }
});

步骤3：重新打包 #

执行npm run build，此时dist目录下的index.html会把所有JS、CSS、图片等资源全部内联进去，不再依赖外部assets目录的资源，直接放入Figma插件即可正常运行。

打包后直接用浏览器本地打开dist/index.html（不需要启动本地服务），如果能正常加载Vue应用，放到Figma插件里就可以正常运行。

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