如何讀取 package.json 的 Property？

我們經常在 package.json 儲存版本資訊，該如何在 Vue 中顯示版本資訊呢？

Version

Vite

package.json

{
  "name": "vue32-lab",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "vite": "^2.7.2"
  }
}

Line 2

"version": "1.0.0",

version：在 package.json 中儲存版本資訊

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({ refTransform: true })
  ],
  define: {
    'APP_VERSION': JSON.stringify(process.env.npm_package_version)
  }
})

Line 9

define: {
  'APP_VERSION': JSON.stringify(process.env.npm_package_version)
}

APP_VERSION：在 defineConfig() 的 define 下定義自己的變數，並使用 process.env.npm_package_version 讀取 package.json 中的 version property

App.vue

<template>
  {{ version }}
</template>

<script setup>
let version = APP_VERSION
</script>

可直接在 Vue 中讀取 APP_VERSION 變數

ES Module

App.vue

<template>
  {{ version }}
</template>

<script setup>
import { version } from '../package.json'
</script>

Line 7

import { version } from '../package.json'

亦可使用 import 將 package.json 載入並直接解構出 version

Conclusion

本文方法只適合 Vite，不適用於 Webpack