Vite构建报错：dist不在项目根目录，调整root后本地服务无法访问

方案1：保留root为src，解决build警告 #

如果不想改动目录结构，继续让root指向src，只需在Vite配置里开启emptyOutDir，就能消除build时的警告，同时保持dist和public在src外部：

// vite.config.js/ts
export default {
  root: 'src',
  publicDir: '../public',
  build: {
    outDir: '../dist',
    emptyOutDir: true // 手动允许清空root外的outDir目录
  }
}

执行npm run build时，Vite会自动清空../dist，不会再弹出那个提示。

方案2：将root改为./，修复dev服务无法访问问题 #

如果要把root设为项目根目录，得确保入口文件路径配置正确：

• 调整入口文件：要么把src/index.html移到项目根目录（符合Vite默认约定），要么在配置里指定入口路径：

  // vite.config.js/ts
  export default {
    root: './',
    publicDir: './public',
    build: {
      outDir: './dist',
      rollupOptions: {
        input: './src/index.html' // 指定入口在src目录下
      }
    },
    server: {
      open: '/src/index.html' // 启动dev时自动打开正确的入口页面
    }
  }
  

• 检查package.json命令：确保dev命令没有多余参数，保持默认即可：

  {
    "scripts": {
      "dev": "vite",
      "build": "vite build"
    }
  }
  

• 配置别名避免路径错误：如果项目里用相对路径容易出错，可以给src配置别名：

  // vite.config.js/ts
  import { defineConfig } from 'vite'
  import path from 'path'
  
  export default defineConfig({
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    },
    // 其他配置...
  })
  

这样调整后，npm run dev就能正常访问localhost，build也能生成正确的dist目录。

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