使用 Vue 插件的 Vite MPA 是如何工作的？

Question

我创建了一个 Vite 应用程序，我需要它有多个页面。我阅读了文档并找到了如何执行此操作 (can be found here)，但是当我运行服务器时，我得到一个空白页面。

我的 vite.config.js 文件：

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

const { resolve } = require('path')

module.exports = {
  build: {
    rollupOptions: {
      input: {
        home: resolve(__dirname, 'src/Home/index.html')
      }
    }
  }
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

这是我的文件结构：

编辑： 我已将配置更改为下面发布的 tony，但它仍然显示空白页。

编辑 2： 我发现您不需要使用 vite.config.js 路由，有更简单的方法创建 main.js、App.vue 和 index.html 文件的副本，并将它们重命名为不同的名称。重命名它们后，将 <script type="module" src="index.js"></script> 更改为新的 JS 文件，并将新 main.js 中的 .vue 文件导入更改为新的 .vue 文件。这是我的新结构：

我所做的只是复制文件并更改名称和导入，而且成功了！

Answer 1

您在 vite.config.js 中有两个默认导出，但应该只有一个：

module.exports = { 1️⃣
  //...
}

export default defineConfig({ 2️⃣
  //...
})

配置应该是：

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

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        home: resolve(__dirname, 'src/Home/index.html')
      }
    }
  }
})

GitHub demo

使用 Vue 插件的 Vite MPA 是如何工作的？

How do Vite MPAs using the Vue plugin work?

javascript

vue.js

vite