如何配置vue.config.js使npm run build后dist的index.html正常运行？

别担心，这个问题我碰到过好多次，大概率是几个常见配置点没搞定，我给你梳理最关键的几个步骤，不用啃完整文档也能快速解决：

1. 修正publicPath配置（最常见原因） #

Vue-CLI默认的publicPath是/，这是给服务器根目录部署用的。如果你直接本地打开dist/index.html（用file://协议），绝对路径会找不到静态资源。

打开你的vue.config.js，添加或修改这个配置：

module.exports = {
  publicPath: './' // 改成相对路径，适配本地打开或非根目录部署
}

2. 确保Babel转译覆盖所有需要的代码 #

你之前提到的babel-loader配置确实是个关键点——如果src目录下有些代码没被Babel转译，浏览器可能无法识别ES6+语法，导致页面空白。

在vue.config.js里配置chainWebpack来调整babel-loader的范围：

const path = require('path')

module.exports = {
  // 其他配置...
  chainWebpack: config => {
    config.module
      .rule('js')
      .include.add(path.resolve(__dirname, 'src')) // 确保整个src目录都被转译
      .end()
      .exclude.add(/node_modules/)
      .end()
      .use('babel-loader')
      .loader('babel-loader')
  }
}

之前你看到的path.resolve(__dirname, 'app/src')其实就是这个思路，只是路径要对应你自己的项目结构（标准Vue-CLI项目的源码目录是src，不是app/src）。

3. 检查路由模式（如果用了Vue Router） #

如果你的项目用了Vue Router，并且设置了mode: 'history'，本地打开file://协议会直接失败——history模式依赖服务器的URL重写规则，本地文件系统不支持。

解决办法二选一：

• 临时改成hash模式：在router/index.js里把mode: 'history'删掉（默认就是hash模式），或者改成mode: 'hash'
• 用本地服务器打开dist目录：比如用serve工具，先安装npm install -g serve，然后在dist目录下运行serve，访问提示的localhost地址

4. 快速排查：打开浏览器控制台看报错 #

不管上面的配置改没改，先打开浏览器的开发者工具（F12）看Console和Network标签：

• Console里如果有语法错误，说明是代码转译的问题
• Network里如果有404，说明是静态资源路径不对

按这几步来，基本能解决90%的build后空白问题。

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