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

[waiaan]

在.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 的条件不会计算呢？ 谢谢。

[libasten]

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

[yangg]

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

[waiaan]

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

[duan602728596]

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

编译后

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

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

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

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

[waiaan]

@duan602728596

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

[duan602728596]

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

[Pencillll]

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

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

[iOCZS]

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

[iOCZS]

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