vue手机端页面Unexpeted use of reserved word 'let' in strict mode报错

问题描述：

最近通过vue开发手机端页面，整个页面基于阿里钉钉运行，页面上线前也经过多个机型的测试（这里包含Android和IOS），但是在上线后发现有部分用户在钉钉中打开的页面为空白页面，打开调试后发现页面有报错如下图：

用户机型为iPhone 5，系统版本为IOS9，钉钉已为最新版本，vue的版本为2.5.2，通过不同机型的测试发现出现该问题的手机系统都为IOS9，跟机型没有多大的关系，并且其他高版本的IOS系统都能够正常访问该页面（andriod系统中暂时没碰到该问题），因此定位该问题可能是因为IOS9不兼容造成的。

报错信息：

SyntaxError:Unexpected use of reserved word 'let' in strict mode.

问题分析：

通过报错可以看到问题应该出现在'let'这个关键字上，let是ES6语法用来声明变量的，但是vue是支持这个语法的为啥会报错呢，最后发现问题出在了项目中，因为之前为了统一项目中一些公共方法的使用所以在前端项目中单独将一些方法抽出到一个模块中（独立于所有的前端项目之外），并通过import方式将这些文件导入到项目中使用，webpack的相关配置如下：

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

那么问题来了通过以上配置可以看出webpack打包编译时只包含src和test目录之下的文件，而之前提出js文件不包含在src和test之中因此不被编译最终造成这些文件中的let不被作为ES6的语法识别所以报错。（此问题目前只在IOS9这个版本的系统中遇到过，其他高版本的系统中都已兼容了这个问题）

解决方式：

能定位到问题就好解决了，这里采用最简单粗暴的方式，将所有的js文件移入到src之下，重新编译项目发现问题解决了用户已经可以正常访问页面了。

这里提供另外一种思路去解决这个问题：

修改webpack的配置文件将存放js文件目录加入到其中，也就是修改这段配置：include: [resolve('src'), resolve('test')]，此方式还没进行过尝试，等尝试过后没有问题的话会继续补全此种解决方式。