Vue.js

Question

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

我知道 index.html 页面已加载，因为我可以编辑 HTML 并查看更改。但是，该页面不是 loading/running 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. At this point, I'm stuck though. I don't see a way to accomplish this via Vite's built-in capabilities. I tried including the 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'
    }
  }
});

我做错了什么？

Answer 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

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

Vue.js - Package app as Figma Plugin using Vite

figma

vite