如何在Angular、Ionic、Capacitor项目中获取package.log版本号

你之前在Cordova项目中用插件获取版本号的逻辑，在Capacitor中不需要做复杂适配，直接用Capacitor官方提供的原生能力就能实现，具体步骤如下：

• 安装官方Device插件
  先执行npm安装命令：
  npm install @capacitor/device
  安装完成后同步原生项目配置：
  npx cap sync

• 编写版本获取逻辑
  Device插件的getInfo方法会直接返回应用版本名、构建号字段，和你之前用的Cordova插件返回值完全对应，示例代码：

  import { Device } from '@capacitor/device';
  
  const fetchAppVersion = async () => {
    const deviceInfo = await Device.getInfo();
    return {
      // 对应对外展示的版本号，例如 2.1.3
      displayVersion: deviceInfo.version,
      // 对应应用构建序号，例如 27
      buildVersion: deviceInfo.build
    }
  }
  

• 将版本号渲染到HTML页面
  在页面加载完成后调用上面的方法，把拿到的版本号插入到页面对应位置即可：

  <footer>
    应用版本：<span id="app-version"></span>
  </footer>
  
  <script>
    document.addEventListener('DOMContentLoaded', async () => {
      const { displayVersion } = await fetchAppVersion();
      document.querySelector('#app-version').textContent = displayVersion;
    })
  </script>
  

注意：浏览器本地调试环境下拿不到真实版本号，字段会返回空值，只有打包成Android、iOS原生安装包运行时才能获取到正确值，和原Cordova插件的表现一致。

内容的提问来源于stack exchange，提问作者Raphaël Balet