javascript - 使用 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 文件，并更改 .vue将新 main.js 中的文件导入到新的 .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