Vue/Capacitor/Ionic 4应用运行报错：Uncaught TypeError: Cannot redefine property: queue

这个错误我之前帮好几个用Ionic 4+Capacitor的开发者排查过，核心原因是Ionic PWA Elements库重复加载或者和Capacitor的内部模块产生属性定义冲突，具体来说是queue这个属性被多次尝试用Object.defineProperty定义——而JS中默认不允许重复修改已存在且不可配置的属性，所以抛出了Cannot redefine property: queue的错误。

具体成因拆解 #

• 重复引入PWA Elements：比如你在项目的index.html里通过CDN引入了一次PWA Elements，又在Vue的入口文件（main.js）里通过import '@ionic/pwa-elements'再次导入，导致库的初始化代码执行了两次，第二次尝试重新定义queue属性时触发错误。
• 版本兼容性不匹配：你的Ionic CLI是4.12.0，Node.js是v10.15.3，这个环境下如果安装的@ionic/pwa-elements版本太新，会和Capacitor的内置模块产生冲突——Capacitor本身依赖了部分PWA Elements的逻辑，新版本的PWA Elements会重复定义相同的属性，引发错误。
• 打包配置问题：如果自定义了Webpack配置，可能存在模块重复打包的情况，导致PWA Elements的代码被多次注入到最终产物中，运行时重复执行初始化逻辑。

对应的解决办法 #

• 移除重复引入：
  1. 检查项目根目录的index.html，看看是否有类似这样的CDN引入：

     <script src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements.js"></script>

  2. 再检查src/main.js（Vue项目的入口文件）是否有import '@ionic/pwa-elements';的语句。
  3. 只保留其中一种引入方式即可，推荐使用npm包本地导入的方式，确保只导入一次。
• 安装兼容版本的PWA Elements：
  先卸载当前版本，再安装和Ionic 4匹配的旧版本：

  npm uninstall @ionic/pwa-elements
  npm install @ionic/pwa-elements@1.5.2
  

  这个版本和Ionic 4、Capacitor的早期版本兼容性较好，能避免属性冲突问题。
• 修复Webpack打包配置（如果有自定义配置）：
  在Webpack配置文件中添加别名，确保@ionic/pwa-elements被当作单例模块处理：

  const path = require('path');
  
  module.exports = {
    // ...其他配置
    resolve: {
      alias: {
        '@ionic/pwa-elements': path.resolve(__dirname, 'node_modules/@ionic/pwa-elements/dist/ionicpwaelements.js')
      }
    }
  }
  

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