Vue.js - 使用 Vite 将应用程序打包为 Figma 插件答案

【问题标题】：Vue.js - Package app as Figma Plugin using ViteVue.js - 使用 Vite 将应用程序打包为 Figma 插件
【发布时间】：2021-12-03 16:17:09
【问题描述】：

我有一个使用 Vite 创建的 Vue.js 应用程序。当我使用npm run dev 并在浏览器中访问该应用程序时，此应用程序成功运行。现在，我正在尝试将应用程序捆绑为单个代码文件，以便可以将其用作plugin for Figma。

我知道 index.html 页面会加载，因为我可以编辑 HTML 并查看更改。但是，该页面并未加载/运行 Vue.js 应用程序本身。我可以在控制台日志中看到以下警告：

<link rel=modulepreload> has no 'href' value

我的项目结构如下：

/
  /dist
    /assets
      index.a386f87b.css
      index.dc441194.js
      vendor.fbe8b50a.js
    index.html
    manifest.json
    plugin.js
  /src
    /views
      Index.vue
      Items.vue
      Calendar.vue
    /res
      /css
        theme.css
      /images
        loading.gif
        splash.jpeg
   App.vue
   main.js
   index.html

当我查看dist 目录中的 index.html 文件时，我看到了：

<script type="module" crossorigin src="/assets/index.dc441194.js"></script>
<link rel="modulepreload" href="/assets/vendor.fbe8b50a.js">
<link rel="stylesheet" href="/assets/index.a386f87b.css">
<div id="app" class="position-absolute top-0 left-0 vh-100 vw-100"></div>

引用看起来正确。但是，显然有些问题是错误的，因为该应用程序没有作为 Figma 中的插件加载。再一次，我知道我已成功加载 index.html 文件，因为如果我手动编辑它，更改会出现在插件中。这将我引向bundling the app as a single code file。在这一点上，我被困住了。我看不到通过 Vite 的内置功能来实现这一点的方法。我尝试包括vite-plugin-singlefile plugin。不幸的是，这对我也不起作用。目前，我的vite.config.js 文件如下所示：

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue';

export default defineConfig(({command, mode }) => {
  return {
    assetsDir: 'res',
    plugins: [
      vue(),
    ],
    root: 'src',
    build: {
      emptyOutDir: true,
      outDir: '../dist'
    }
  }
});

我做错了什么？

【问题讨论】：

标签： vue.js figma vite

【解决方案1】：

Figma 忽略了 <script>.src 和 <link>.href，这与您链接的文档一致，声明 “所有代码必须在一个文件中”。

使用vite-plugin-singlefile（如您所述）内联index.html 中的所有脚本和样式似乎确实可以解决问题：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), viteSingleFile()],
  build: {
    cssCodeSplit: false,
    assetsInlineLimit: 100000000,
    rollupOptions: {
      output: {
        manualChunks: () => "everything.js",
      },
    },
  }
})

demo

【讨论】：