Vue项目安装自定义包遇Unexpected Token错误，求解决方案

这个错误的根源很明确：你在类里使用了类字段声明语法（比如name = ''这种直接在类顶层定义属性的写法），而你的Babel配置还没启用对这个ES提案特性的支持——它不属于ES标准的默认子集，所以Webpack的Babel loader无法解析它。

下面是两种解决思路，你可以根据自己的情况选择：

方案一：配置Babel支持类字段语法 #

这是最推荐的方式，能保留你简洁的代码写法：

1. 安装必要的Babel插件
   在项目根目录执行命令：

   npm install --save-dev @babel/plugin-proposal-class-properties
   # 如果你用yarn的话：
   # yarn add -D @babel/plugin-proposal-class-properties
   

2. 修改Babel配置文件
   找到项目中的.babelrc或babel.config.js文件，把插件添加到配置里：
   比如.babelrc的配置：

   {
     "presets": ["@babel/preset-env", "@babel/preset-vue"],
     "plugins": ["@babel/plugin-proposal-class-properties"]
   }
   

   或者babel.config.js：

   module.exports = {
     presets: ['@babel/preset-env', '@babel/preset-vue'],
     plugins: ['@babel/plugin-proposal-class-properties']
   }
   

3. 重新运行构建命令，这个错误应该就会消失了。

方案二：改用传统的构造函数赋值写法 #

如果暂时不想修改配置，也可以把代码改成ES标准支持的传统写法，在构造函数里初始化属性：

export default class DeviceLocation {
  constructor (data) {
    // 先初始化默认值
    this.name = ''
    this.identifier = ''
    // 再合并传入的数据
    Object.assign(this, data)
  }
}

这样也能绕过语法解析错误，不过代码会稍微繁琐一点。

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