Vite项目自定义main.js路径后仍报错，如何正确配置？

错误原因 #

你仅配置了rollupOptions，但该配置仅作用于生产构建阶段。开发模式下，Vite是直接读取项目根目录index.html里的<script>标签来加载入口文件的，因此会默认查找/src/main.js。

正确配置步骤 #

1. 修改index.html的入口引用
   根据main.js的实际存放路径，调整index.html中的script标签路径。比如你的main.js放在src/app/main.js，则修改为：

   <script type="module" src="/src/app/main.js"></script>
   

   路径需相对于Vite默认的根目录（项目根目录）。

2. 配置生产构建的入口（必选）
   确保生产打包时能正确识别入口，在vite.config.js中配置build.entry（推荐）或rollupOptions.input：

   import { defineConfig } from 'vite'
   
   export default defineConfig({
     build: {
       // 方式1：直接指定入口文件
       entry: './src/app/main.js',
       // 方式2：通过rollupOptions配置（适配多入口场景）
       // rollupOptions: {
       //   input: {
       //     main: './src/app/main.js'
       //   }
       // }
     }
   })
   

3. 自定义项目根目录（可选）
   若想把main.js所在文件夹设为Vite的根目录（比如src/app），需额外配置root选项：

   export default defineConfig({
     root: './src/app', // 指定新的根目录
     build: {
       outDir: '../../dist' // 输出目录需相对于新根目录调整路径
     }
   })
   

   此时index.html要放在src/app目录下，script标签直接写src="/main.js"即可。

关键提醒 #

开发模式的入口由index.html的script标签决定，rollupOptions只影响生产构建，两者都配置才能保证开发、构建环节均正常运行。

内容的提问来源于stack exchange，提问作者Anéeka