Vue项目执行npm run build打包后dist目录生产版本无法运行求助

常见排查配置项如下： #

• 检查vue.config.js中的publicPath配置
  默认publicPath值为/，仅适用于部署在域名根目录的场景。如果是本地直接访问dist目录或者部署在子目录下，需要将该值修改为相对路径./，配置示例：

module.exports = {
  publicPath: './'
}

• 检查路由模式配置
  如果项目使用了vue-router的history模式，本地直接运行dist包时没有服务端配套的重定向规则，会出现路由资源找不到导致程序崩溃的问题。临时测试可先切换为hash模式验证，生产部署时再给Nginx等服务端配置对应的重定向规则即可。

• 检查静态资源引用方式
  不要在代码中写死绝对路径引用本地静态资源（例如/src/assets/xxx.png），这类路径打包后不会被自动处理，会导致资源加载失败引发程序崩溃，建议使用相对路径或者模块化导入的方式引用静态资源。

• 检查生产环境变量配置
  确认项目根目录下存在.env.production文件，且生产环境需要的所有环境变量都已正确配置，避免开发环境可用的变量在生产环境缺失导致逻辑报错。

• 确认dist的启动方式正确
  不要直接双击打开dist目录下的index.html文件，需要用静态服务启动：

# 全局安装serve静态服务工具
npm install -g serve
# 进入dist目录
cd dist
# 启动静态服务
serve .

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