Environment variables compiled incorrectly in a production build when used in combination with a compare.

Version

3.7.0

Environment info

Environment Info:

  System:
    OS: Windows 10
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 10.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.13.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. Add an environment variable for example VUE_APP_IS_PUBLIC=true in .env.production (or development)
2. Add somewhere in your code const isPublic = process.env.VUE_APP_IS_PUBLIC === "true";
3. Do a production build.

What is expected?

The compiled output should be something like: var s = "true" === "true";

What is actually happening?

What you actually see is: var s = !1; (Which is false)

---

A workaround is to change the variable to something like const isPublic = process.env.VUE_APP_IS_PUBLIC and then check it afterward. It will then compile to: var s = "true"; which is expected.

Could not find any documentation of this so it’s probably a bug. This took me a while to find and happened to gave us some unpredicted behavior since we expected the value to be true.

Environment Info is less relevant because we host it in different environments like Azure and IIS.

[gilian-schreuders]

I’m sorry I think I made a mistake. There is no typescript difference 😅.

However, there is still a significant difference between the following:

• var test1 = process.env.VUE_APP_IS_PUBLIC === "true";
  • Compiles to: var e=!1
• var test2 = process.env.VUE_APP_IS_PUBLIC;
  • Compiles to: var t="true"

Because in the second example, someone could replace the original string value after a build since the original value is used. This is not possible in the first example since the original value is replaced.

Here’s a repo of the above: https://github.com/gilian1993/vue-issue-4015-2

[LinusBorg]

Which is not the case in this scenario.

It totally is the case. it works exactly as described.

Your issue is that you try to replace a bit of code that the minifier (not the env variable mechanism) replaced with something smaller (to do its job - minifying your code) at the end of your build process.

You woud have to configure Terser (the minifier) to skip this placeholder (if that’s possible) or that sort of optimization in general.