Laravel/VueJS项目控制台报错不显示位置如何排查及配置

• 开启精准源码映射
  在项目根目录的webpack.mix.js中添加如下配置，开启保留原始文件行号的源码映射：

mix.sourceMaps('eval-source-map', false);

该配置在开发环境下会完整保留.vue单文件组件的原始代码结构，报错时会直接输出对应文件的具体行号，不会出现无定位信息的泛化报错。

• 配置Vue开发版本别名
  默认Laravel Mix在部分场景下会调用无完整报错提示的Vue运行时版本，添加webpack别名强制使用带调试能力的Vue版本：

mix.webpackConfig({
  resolve: {
    alias: {
      'vue$': process.env.NODE_ENV === 'production' 
        ? 'vue/dist/vue.runtime.min.js' 
        : 'vue/dist/vue.esm.js'
    }
  }
})

• 开发阶段使用npm run watch或npm run dev命令编译，不要使用生产环境编译命令npm run prod，后者会压缩混淆代码、剥离所有调试信息，自然无法输出有效报错定位。

以上就是配置优化前的典型无定位报错样式，调整配置后不会再出现这类问题。

• 全局错误捕获兜底
  在Vue项目入口文件（通常是resources/js/app.js）中添加全局错误捕获钩子，所有Vue运行时错误都会经过该钩子，可以直接打印出错组件的名称、props等上下文信息：

Vue.config.errorHandler = (err, vm, info) => {
  console.error('错误详情：', err);
  console.error('出错组件：', vm.$options.name || vm.$options.__file);
  console.error('错误场景：', info);
}

• 针对当前props must be strings when using array syntax错误的排查逻辑
  该错误本质是数组格式的props声明中出现了非字符串值，优先排查以下场景：

1. 有没有组件写了props: [1, 'title']、props: [null, 'name']这类包含非字符串元素的写法
2. 有没有动态注册组件时，传入的props数组是后端接口返回的动态值，出现了非字符串元素
3. 引用的第三方组件内部是否存在不规范的props声明

• 二分法缩小范围
  如果报错无明确指向，可逐批注释路由、组件引入，每次注释后编译测试是否还有报错，逐步缩小排查范围，最快10次以内就能定位到出错的文件。
• 借助Vue Devtools排查
  安装浏览器Vue Devtools扩展，打开组件面板，异常组件会直接标红提示，点击即可查看对应组件的所有props声明信息，快速找到不规范的写法。

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