错误重现

// 使用 @photo-sphere-viewer 全景
// https://photo-sphere-viewer.js.org
import { Viewer } from '@photo-sphere-viewer/core';

// 引入一些插件
import {MarkersPlugin} from "@photo-sphere-viewer/markers-plugin"
import {VirtualTourPlugin} from "@photo-sphere-viewer/virtual-tour-plugin"

在引入插件之后, 开发服务会抛出异常, 异常的位置会提示在包含"?."代码的附近. 错误原因是使用了可选链/optionalchainning 语法

问题分析

经过测试，发现vue-cli项目本身是支持optional chaining语法的, 查看报错位置，发现位置在node_modules中的js文件。推测可能是为了优化打包速度,一些特定loader在配置时，支持会把node_modules/*排除掉，导致node_modules中的文件使用特定语法,loader没有处理,导致打包失败

解决方式

在vue-cli的配置中有一个配置 Configuration Reference | Vue CLI (vuejs.org)

默认情况下，babel-loader会忽略node_modules里面的所有文件。你可以启用这个选项，以避免第三方依赖的未转编译的代码出现。

不过，转译所有的依赖关系可能会减慢构建过程。如果构建性能是一个问题，你可以通过传递一个包名或名称模式的数组给这个选项，明确地只转译部分依赖关系。

实际操作

在项目的 vue.config.js文件中增加如下配置,可以解决

module.exports = {
  transpileDependencies: [
    // can be string or regex
    'my-dep',
    /other-dep/
  ]
}