把这个文件用vite打包
<script setup>
// 有一个环境变量 VITE_VALUE值为'NONE'
const { VITE_VALUE } = import.meta.env
console.log(VITE_VALUE)
const viteVal = import.meta.env.VITE_VALUE
console.log(viteVal)
console.log(import.meta.env.VITE_SHOWPAYMENT)
console.log(viteVal !== 'NONE' && window.__somevalue)
const d = import.meta.env.VITE_VALUE !== 'NONE' && window.__somevalue
</script>
<template>
<div>1
<div v-if="d">2</div>
</div>
</template>
结果如下
import {
openBlock as o,
createElementBlock as n,
createTextVNode as c,
unref as l,
createCommentVNode as r,
} from 'vue'
const E = {
// 其他环境变量
VITE_VALUE: 'NONE',
}
const a = { key: 0 }
const V = {
__name: 'a',
setup (N) {
// 原始语句 const { VITE_VALUE } = import.meta.env
const { VITE_VALUE: _ } = E
console.log(_)
// 原始语句 const viteVal = import.meta.env.VITE_VALUE
const e = 'NONE'
// 原始语句 console.log(viteVal)
console.log(e)
// 原始语句 console.log(import.meta.env.VITE_SHOWPAYMENT)
console.log('NONE')
// 原始语句 console.log(viteVal !== 'NONE' && window.__somevalue)
console.log(e !== 'NONE')
// 原始语句 const d = import.meta.env.VITE_VALUE !== 'NONE' && window.__somevalue
const s = !1
return (u, t) => (
o(),
n('div', null, [
t[0] || (t[0] = c('1 ')),
l(s) ? (o(), n('div', a, '2')) : r('', !0), //v-if
])
)
},
}
export { V as default }
可以看到 只有通过import.env.VITE_VALUE直接引用环境变量的语句才能被替换为静态值'NONE' 而且只有引用静态值的语句会在编译时计算
而v-if即使使用了静态值 也不会优化