使用Vue CLI加载AWS IoT证书时遇filesys.existsSync错误的解决方法

这个问题的核心原因很明确：你在浏览器环境（Vue CLI项目）中使用了Node.js版本的AWS IoT Device SDK，而该SDK依赖Node.js的fs文件系统模块——浏览器环境根本没有这个模块，所以才会抛出existsSync不存在的错误，和你提到的GitHub issue原因完全一致。

下面是具体的修复步骤：

1. 改用浏览器专用的AWS IoT SDK #

你已经在index.html中引入了aws-iot-sdk-browser-bundle.js（这是浏览器版的SDK），但代码里还是用require('aws-iot-device-sdk')加载了Node.js版的SDK，这是冲突的根源。直接使用全局的window.awsIot对象即可。

2. 传递证书内容而非文件路径 #

Node.js版SDK通过keyPath/certPath/caPath读取本地文件，但浏览器无法访问本地文件系统。你已经在Webpack配置中用fs.readFileSync读取了证书内容，所以需要把配置字段改成浏览器版SDK对应的内容字段：

• 把keyPath改成key
• 把certPath改成cert
• 把caPath改成caCert（浏览器版SDK的CA证书字段名是caCert，不是caPath）

3. 修改配置与代码 #

调整Webpack配置（build/webpack.dev.conf.js） #

确保读取证书时转成UTF-8字符串（fs.readFileSync默认返回Buffer，直接JSON.stringify会出问题）：

const fs = require('fs');
const devWebpackConfig = merge(baseWebpackConfig, {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env'),
      awsConfig: JSON.stringify({
        // 用key/cert/ca字段传递证书内容，转成UTF-8字符串
        key: fs.readFileSync(path.resolve(__dirname, '../certs/sample.pem.key'), 'utf8'),
        cert: fs.readFileSync(path.resolve(__dirname, '../certs/sample.pem.crt'), 'utf8'),
        ca: fs.readFileSync(path.resolve(__dirname, '../certs/root.pem.key'), 'utf8'),
        debug: true,
        clientId: 'nouser' + (Math.floor((Math.random() * 100000) + 1)),
        host: 'XXXXXXXXXXXXXXX-ats.iot.ap-northeast-1.amazonaws.com'
      })
    }),
    // ...

修改Home.vue的代码 #

去掉Node.js风格的require，直接使用全局awsIot，并调整配置字段：

<template>
<div>
<p>index page</p>
</div>
</template>
<script>
export default {
mounted() {
  // 直接使用全局的awsIot对象（来自index.html引入的浏览器捆绑包）
  var device = window.awsIot.device({
    key: awsConfig.key,
    cert: awsConfig.cert,
    caCert: awsConfig.ca, // 浏览器版SDK的CA证书字段是caCert
    debug: awsConfig.debug,
    clientId: awsConfig.clientId,
    host: awsConfig.host
  });

  device
    .on('connect', function() {
      console.log('connect');
    })
    .on('error', function(err) {
      // 增加错误监听，方便调试
      console.error('IoT Connection Error:', err);
    });
}
}
</script>

4. 验证修复逻辑 #

• 浏览器版SDK不依赖Node.js的fs模块，所以不会再触发existsSync的错误
• 证书内容在构建阶段就被读取并注入到前端代码中，浏览器直接使用这些字符串内容建立连接
• 确保index.html中的aws-iot-sdk-browser-bundle.js路径正确，能被正常加载

按照这些步骤修改后，你应该能正常连接AWS IoT，不会再遇到那个TypeError了。

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