image.png
需求：想在app.vue中输出当前运行的前端版本号
-
踩坑1
image.png
解决方法：在tsconfig.json中添加配置node
{
"compilerOptions": {
"types": ["node"]
}
}
-
踩坑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 --- 开发调试时页面输出没问题，打包出现问题了
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>
