请教关于 vue-cli 中环境变量 process.env.VUE_APP_的问题（vue2）

This topic created in 752 days ago, the information mentioned may be changed or developed.

在.env 文件中设置了 VUE_APP_TITLE=My App ，然后以下代码

// 代码块 1 if (process.env.VUE_APP_TITLE === 'My App1') { import('./child1') } // 代码块 2 if (['My App1'].indexOf(process.env.VUE_APP_TITLE) > -1) { import('./child2') }

打包后的代码，代码块 1 是不存在了，然而代码块 2 还在。如果都是在编译时就处理了环境变量，为什么代码块 2 的条件不会计算呢？谢谢。

vue-cli

环境变量

process.env

9 replies 2024-04-22 20:38:37 +08:00

libasten

Apr 22, 2024

为啥非要用代码 2 的写法？
看看是不是空格的问题？

yangg

Apr 22, 2024

这应该是 tree shaking 处理的问题，他不会去执行你这个 indexOf 表达式

waiaan

Apr 22, 2024

@libasten
历史遗留问题，每个项目都有自己的环境变量。

duan602728596

Apr 22, 2024

if (process.env.VUE_APP_TITLE === 'My App1') {
import('./child1')
}

编译后

if ('My App' === 'My App1') {
import('./child1')
}

因为"==="两边都是常量，所以压缩后

if (false) {
import('./child1')
}

就会把这段代码删除。
代码块 2">"的左边不是常量

waiaan

Apr 22, 2024

@duan602728596

谢谢，这块是属于哪项配置的内容？有文档吗？

duan602728596

Apr 22, 2024

@waiaan process.env 是 webpack or vite 处理的，https://webpack.js.org/guides/environment-variables/。
压缩是 terser 处理的，这个也不算是配置的把，所以没有文档。

Pencillll

Apr 22, 2024 via Android

楼上是对的，我再补充一下，把 "xxx" === "xxx" 替换为 true 是通过静态分析代码完成的，所以一般只能处理简单的表达式，像 2 这种比较复杂的就不行了，["xxx"].indexOf("xxx") 并不能确定为 true ，因为 Array.prototype.indexOf() 有可能在某个地方被覆写，实现了不一样的逻辑

不过 terser 有个 unsafe 选项，开启之后可以在忽略 edge case 的前提下处理某些复杂表达式，不确定包不包括 indexOf ，但可以试一试

iOCZS

Apr 22, 2024

普通的函数调用不是静态的。。。不可能在编译时给你搞了，除非你把它静态化。

iOCZS

Apr 22, 2024

就好像 C++里的 constexpr 函数才行，const 函数都不行