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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 600 天前的主题，其中的信息可能已经有所发展或是发生改变。

在.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 条回复 2024-04-22 20:38:37 +08:00

libasten

2024-04-22 16:41:56 +08:00

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

yangg

2024-04-22 17:08:19 +08:00

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

waiaan

2024-04-22 17:09:31 +08:00

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

duan602728596

2024-04-22 17:29:24 +08:00

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

编译后

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

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

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

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

waiaan

2024-04-22 17:31:06 +08:00

@duan602728596

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

duan602728596

2024-04-22 17:47:10 +08:00

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

Pencillll

2024-04-22 20:20:30 +08:00 via Android

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

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

iOCZS

2024-04-22 20:37:05 +08:00

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

iOCZS

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

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