0

我一直在努力解决如何做到这一点。我一直在开发一个 vue-cli 应用程序，显然，在节点世界中，我们都相信存在一种开发、一种登台和一种生产环境。

我一直在努力减少尽可能多的体力劳动，所以我不会手动移动文件、更改配置等。

我总共有 5 个环境，但是我需要用这个系统清理 3 个开发环境，我真的没有办法去做，所以我需要一些指导。

  • 第一个开发环境，localhost:12345 - 我已将变量放置在它关闭身份验证的位置并指定 url 路径。如果这被称为 myLocal for process.env.NODE_ENV，那么我可以使用 env.mylocal 的变量。
  • 第二个开发环境，localhost:12345（是的，相同的）-我已将变量放置在所有身份验证返回的位置，并且我指定了相同的 url 路径。如果这被称为 process.env.NODE_ENV 的 DevLocal，那么我可以使用 env.devlocal 的变量
  • 第三个开发环境，dev.example.com/newAppLoc/web - 我已将变量放置在所有身份验证返回的位置，并指定了一个新的 url 路径。如果这被称为 process.env.NODE_ENV 的开发，那么我可以使用 env.development 的变量

第 4 和第 5 将分别是分期和生产。

如果我可以选择将自己的环境名称创建为 3 个以上，则可以避免这个问题。因为那时我需要做的就是指定要使用的环境，并让构建脚本运行。然后到那时，我可以发布我的整个 repo 而不必担心要发送哪些 env 文件，因为它已经在构建中指定了。

但由于我只能指定 3 个，我需要帮助来解决这个问题。我不得不担心我的文件被发送，因为担心一个文件的存在会覆盖另一个配置。我还必须担心我的文件被发送到其他人可以获取并覆盖他们的项目设置的 repo 上。在我看来，这整个计划似乎太浮夸了，我对这种严格和过度考虑的混乱相当悲观。然而，我很想知道我可以看到什么样的工作流程可以将其应用于 3 个以上的环境。

此外，我无法覆盖“开发”、“暂存”、“生产”的值。有一些检查可以防止您将值与其他内容进行比较。这意味着，在您的 webpack.config.js 或 vue.config.js 中，如果您的 process.env.NODE_ENV 是 MyLocal，并且您尝试将其与“MyLocal”进行比较，那么它实际上会变为 false。

这是我的 package.json 中的脚本

"serve": "vue-cli-service serve",
"serve:mylocal": "vue-cli-service serve --mode MyLocal",
"build:mylocal": "vue-cli-service build --mode MyLocal",
"build:devlocal": vue-cli-service build --mode devlocal",
"build:dev": "vue-cli-service build --mode development",
"build:prod": "vue-cli-service build",

所以：

const isDevBuild = process.env.NODE_ENV === "MyLocal";  // false if process.env.NODE_ENV = MyLocal
const isDevBuild = process.env.NODE_ENV === "production"; // true if process.env.NODE_ENV = production

我刚在想：

  • MyLocal 将与 .env.local 相同
  • DevLocal 将与 .env.development.local 相同
  • 开发将与 .env.development 相同

但问题是，你如何指定使用哪个？它们仅基于存在的优先级，这使得控制变得更加困难。

4

1 回答 1

0

因此，我放弃了为该场景寻找工作流程的尝试，并尝试找到一种方法来蛮力实现我想要实现的想法。

所以 vue-cli 需要这些模式来应用 process.env.NODE_ENV 并找到正确的 .env 文件。但是，在 vue.config.js 文件中， process.env.NODE_ENV 的值被 vue-cli-serve 或 vue-cli-build 命令的默认值覆盖。这就是为什么它能够找出“生产”或“开发”是否为真，而不管你给它的模式如何，都没有其他价值。

所以我把上面的脚本改成：

"build:mylocal":  set NODE_ENV=MyLocal && "vue-cli-service build --mode MyLocal",
"build:devlocal":  set NODE_ENV=DevLocal && vue-cli-service build --mode Devlocal",

这给了我正确的价值观，但仍然没有用。我添加了 console.log(process.env.NODE_ENV)，它还给了我 MyLocal，但是：

console.log(process.env.NODE_ENV === "MyLocal")   // still false!!

直到我做了一个 JSON.stringify(process.env.NODE_ENV) 并发现结果是“MyLocal”。看到那个空旷的地方了吗？现在想象一下在没有引号的控制台上看到它。需要将集合 NODE_ENV 包含在括号中。

所以最终的解决方案：

"build:MyLocal": "(set NODE_ENV=MyLocal) && vue-cli-service build --mode MyLocal"
"build:DevLocal": "(set NODE_ENV=DevLocal) && vue-cli-service build --mode DevLocal"

这是一个有点hacky的解决方案。您需要显式设置 NODE_ENV 以覆盖 vue-cli 在 vue.config.js 中设置 NODE_ENV 的机制，并且您仍然需要 --mode 参数来利用 vue-cli 选择环境文件的功能。

于 2020-03-26T03:28:06.480 回答