使用Vue-cli / webpack / nodenv的dotenv和本地文件工作流程说明

Question

关于如何执行此操作，我一直在撞墙。我一直在开发vue-cli应用程序，显然，在节点世界中，我们都相信存在一个开发，一个登台和一个生产环境。

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

我总共有5个环境，但是我需要使用该系统清理3个开发环境，而且我实在无能为力，因此我需要一些指导。

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

第四和第五将分别是演出和制作。

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

但是由于我只能指定3个，因此我需要帮助来解决这个问题。我不得不担心我的文件发送时会担心一个文件的存在会覆盖另一个配置。我还必须担心我的文件是通过回购发送的，其他人可以提取这些文件并覆盖其项目设置。在我看来，整个方案似乎太过于宽容了，我对这种严格和过度思考的混乱感到非常悲观。但是，我很想知道我可以在3种以上的环境中使用哪种工作流程。

而且，我也无法覆盖“ development”，“ staging”，“ production”的值。有一些检查可以阻止您将值与其他值进行比较。意思是，在您的webpack.config.js或vue.config.js中，如果您的process.env.NODE_ENV是MyLocal，并且您尝试将其与“ MyLocal”进行比较，则它实际上将变为假。

这是我的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相同

但是问题是，您如何指定使用哪个？它们仅基于现有的优先级，因此更难控制。

关于如何执行此操作，我一直在撞墙。我一直在开发vue-cli应用程序，显然，在节点世界中，我们所有人都相信存在一个开发，一个阶段，...

Answer 1

因此，我放弃了尝试为该方案找到工作流的方法，并试图找到一种方法来强行实施我试图实现的想法。