Vite 2.6搭配Vue 3.2多页应用打包失败仅生成index页如何解决？

常见根因 #

1. vite.config.js 缺少 defineConfig 导入，配置加载异常导致rollup无法正确识别.vue文件解析规则
2. 多页入口HTML的JS引用路径错误，直接引用.vue文件或路径填写错误
3. 代码中动态导入写法不符合rollup插件要求
4. .vue文件存在隐藏的编码问题（比如BOM头、不可见字符）

具体修复步骤 #

第一步：修正vite.config.js配置 #

你当前的配置缺少defineConfig的导入声明，根据项目模块类型选对应写法：

若你的package.json未设置"type": "module"（CommonJS规范）：

const { defineConfig } = require('vite')
const { resolve } = require('path')

module.exports = defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        valpass: resolve(__dirname, 'validation_password.html')
      }
    }
  }
})

若你的package.json设置了"type": "module"（ESM规范）：

import { defineConfig } from 'vite'
import { resolve } from 'path'
import { fileURLToPath } from 'url'
const __dirname = fileURLToPath(new URL('.', import.meta.url))

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        valpass: resolve(__dirname, 'validation_password.html')
      }
    }
  }
})

第二步：校验多页HTML的入口引用 #

确保validation_password.html中存在正确的JS入口引用，示例：

<!DOCTYPE html>
<html lang="zh-CN">
<body>
  <div id="app"></div>
  <!-- 必须引入对应的JS入口，不要直接引用.vue文件 -->
  <script type="module" src="/src/valpass.js"></script>
</body>
</html>

对应的入口JS（比如src/valpass.js）中正常引入Vue、挂载根组件即可，和index页的main.js逻辑一致。

第三步：修正动态导入写法 #

如果代码中存在动态导入组件的逻辑，必须保留固定的路径前缀和后缀，不能使用完全动态的路径：

• 错误写法：import(componentPath)
• 正确写法：import(../components/${compName}.vue)

第四步：排查.vue文件编码 #

打开PassVal.vue，确认第一行是合法的<template>标签，没有隐藏的不可见字符，也没有UTF-8 BOM头，可新建空白.vue文件复制原内容重新保存尝试。

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