VueJS+Vite执行npm run build后未生成index.html及资源缺失问题

问题根源分析 #

1. index.html缺失：你的vite.config.js中错误地将build.rollupOptions.input设为src/main.js，但Vite是基于HTML的构建工具，默认入口是根目录的index.html，直接指定JS入口会导致Vite忽略index.html的打包。
2. 部分图片缺失：入口配置错误导致Vite无法正确解析src/assets下资源的依赖关系，进而未将这些图片打包到dist目录。

分步解决方案 #

1. 修复Vite入口配置 #

修改vite.config.js的构建配置，要么删除错误的input设置，要么将入口改为根目录的index.html：

import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import dotenv from 'dotenv';

const env = process.env.VITE_APP_ENV || 'dev';
const envConfig = dotenv.config({ path: `.env.${env}` }).parsed;

export default defineConfig({
  plugins: [vue()],
  define: {
    'process.env': Object.keys(envConfig).reduce((acc, key) => {
      acc[key] = envConfig[key];
      return acc;
    }, {}),
  },
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  build: {
    outDir: 'dist',
    // 要么删除下面的rollupOptions配置，要么修正input路径
    rollupOptions: {
      input: 'index.html' // 正确入口为根目录的index.html
    }
  }
});

2. 确保资源引用规范 #

对于src/assets下的图片，组件中需使用正确的引用方式：

• Vue模板中用相对路径或别名：

  <!-- 相对路径 -->
  <img src="./assets/datatable/down-arrow.png" alt="下拉箭头">
  <!-- @别名 -->
  <img src="@/assets/menu/menu.png" alt="菜单图标">
  

• CSS中引用：

  background-image: url('@/assets/datatable/up-arrow.png');
  

3. 重新执行构建 #

先清理旧的dist目录，再重新构建：

# Linux/macOS
rm -rf dist
# Windows命令行
rd /s /q dist

# 重新构建
npm run build

额外优化：环境变量配置（可选） #

Vite原生支持环境变量，无需手动用dotenv解析，可简化配置：

1. 环境变量名统一以VITE_开头（如VITE_API_BASE_URL）
2. 在package.json的build命令中指定环境：

   "scripts": {
     "build": "VITE_APP_ENV=prod vite build"
   }
   

3. 简化后的vite.config.js：

   import { fileURLToPath, URL } from "url";
   import { defineConfig } from "vite";
   import vue from "@vitejs/plugin-vue";
   
   export default defineConfig({
     plugins: [vue()],
     resolve: {
       alias: {
         "@": fileURLToPath(new URL("./src", import.meta.url)),
       },
     },
     build: {
       outDir: 'dist'
     }
   });
   

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