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

image.png

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

1. 踩坑1

   
   image.png

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

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

2. 踩坑2

   
   image.png
   

   代码是这样写的

// 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 --- 开发调试时页面输出没问题，打包出现问题了

   
   image.png
   image.png

解决方法：不在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>