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 --- 開發(fā)調(diào)試時頁面輸出沒問題，打包出現(xiàn)問題了
image.png
image.png
解決方法：不在console.log中輸出完整變量路徑 或者說
'process.env.VUE_APP_VERSION'不能以字符串的形式出現(xiàn)
<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>
