vue3+ts前端输出当前版本号

需求：想在app.vue中输出当前运行的前端版本号

1. 踩坑1

   

解决方法：在tsconfig.json中添加配置node

{
    "compilerOptions": {
        "types": ["node"]
    }
}

2. 踩坑2

   

   代码是这样写的

// vite.cinfig.ts
process.env.VUE_APP_VERSION = require( ./package.json ).version
export default defineConfig({
    define: {
         process.env.VUE_APP_VERSION : process.env.VUE_APP_VERSION
    }
})

// App.vue
<script setup lang="ts">
    console.log( VUE_APP_VERSION , process.env.VUE_APP_VERSION)
</script>

解决方法：在vite.config.ts中，修改引入与引用方法

// vite.cinfig.ts
const version = require( ./package.json ).version
export default defineConfig({
    define: {
         process.env : { VUE_APP_VERSION: version }
    }
})

// App.vue
<script setup lang="ts">
    console.log( VUE_APP_VERSION , process.env.VUE_APP_VERSION)
</script>

3. 踩坑3 — 开发调试时页面输出没问题，打包出现问题了

   

   

解决方法：不在console.log中输出完整变量路径 或者说
process.env.VUE_APP_VERSION 不能以字符串的形式出现

<script setup lang="ts">
// 打包报错
console.log( process.env.VUE_APP_VERSION , process.env.VUE_APP_VERSION)
// 打包正常
console.log( VUE_APP_VERSION , process.env.VUE_APP_VERSION)
</script>