Vite（Vue.js 3）多页面构建问题：详情页HTML未生成

我正在开发一个展示全球各国信息的Web应用，点击国家可跳转至详情页查看详细信息。但执行build命令生成生产代码时，国家详情页的HTML文件未被构建。

目录结构 #

root
--vite.config.js
--node_modules
--public
--scss
--package.json
--package-lock.json
--src
----index.html
----App.vue
----main.js
----components (not important)
----country
--------country.js
--------country.html
--------AppCountry.vue

当前vite.config.js内容 #

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

// https://vitejs.dev/config/
export default defineConfig({
  // base: "/countries-api/",
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },

  },
    build:{
      rollupOptions:{
        input:{
          main:resolve(__dirname, 'index.html'),
          country:resolve(__dirname, 'src/country/country.html')
        },
        external:[
          resolve(__dirname, 'src/country/country.js')
        ],
      },
      watch:{

      }
    }
})

问题分析与修复方案 #

问题点 #

1. 缺失fileURLToPath导入：配置中使用了fileURLToPath方法但未从node:url模块导入，导致配置解析失败，Rollup的多入口配置无法生效。
2. 错误标记country.js为外部依赖：external配置是让Rollup跳过指定文件的打包，但country.js是详情页的入口依赖，标记为外部会导致构建逻辑异常。
3. 需确认country.html的入口脚本引入是否正确：如果HTML里没有正确关联country.js，也会导致页面无法被正常构建。

修复步骤 #

1. 补充fileURLToPath导入
   在vite.config.js顶部添加：

import { fileURLToPath } from 'node:url'

2. 移除country.js的外部依赖配置
   删除rollupOptions中的external数组，或移除其中的resolve(__dirname, 'src/country/country.js')项，内部业务代码不需要排除在打包流程外。

3. 验证country.html的脚本引入
   确保country.html里正确引入入口脚本，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Country Detail</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="./country.js"></script>
</body>
</html>

4. 修改后的完整vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'node:path'
import { fileURLToPath } from 'node:url'

export default defineConfig({
  // base: "/countries-api/",
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  build:{
    rollupOptions:{
      input:{
        main:resolve(__dirname, 'index.html'),
        country:resolve(__dirname, 'src/country/country.html')
      }
    },
    watch:{

    }
  }
})

5. 重新执行构建
   运行npm run build（或yarn build），此时dist目录下应该会生成index.html和country.html两个页面文件。

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