用Vue-cli / webpack / nodenv解释dotenv和本地文件工作流

Question

我一直在思考如何做到这一点。我一直在开发vue-cli应用程序，显然，在节点世界中，我们都相信存在一个开发、一个阶段和一个生产环境。

我一直在努力减少尽可能多的体力劳动，所以我不会继续手工移动文件，改变信任，等等。

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

• 1 dev环境，localhost:12345 -我已经放置了变量以关闭身份验证并指定url路径。如果这被称为MyLocal for process.env.NODE_ENV，那么我可以使用env.mylocal的变量。
• 2 dev环境，localhost:12345 (是相同的)--我将变量放置在所有身份验证返回的地方，并指定相同的url路径。如果这被称为DevLocal for process.env.NODE_ENV，那么我可以使用env.devlocal的变量
• 第三代开发环境，dev.example.com/newAppLoc/web -我已经将变量放置在所有身份验证返回的地方，并指定了一个新的url路径。如果这名为process.env.NODE_ENV开发，那么我可以使用env.Development的变量

第四和第五分别是分期和生产。

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

但是，由于只有3我可以指定，我需要帮助，以了解这一点。我不得不担心我的文件被发送，因为我担心一个文件的存在会覆盖另一个配置。我还必须担心我的文件被发送到回购程序中，其他人可以获取这些文件，并使其项目设置被覆盖。在我看来，这整个计划看上去太不靠谱了，我对这个严格且深思熟虑的烂摊子相当悲观。然而，我很想知道我能看到什么样的工作流，它已经适用于3种以上的环境。

此外，我也无法覆盖“开发”、“分期”、“生产”的值。在这些检查中，它们阻止您将值与其他值进行比较。这意味着，在您的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

我在想：

.env.local

• DevLocal与.env.development.local

• Development相同，
• MyLocal与.env.development

相同

但问题是，您如何指定使用哪一个呢？它们仅仅是以现有的优先级为基础的，这使得控制变得更加困难。

Answer 1

因此，我放弃了为这个场景寻找一个工作流，并试图找到一种方法来强行实现我想要实现的想法。

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

因此，我将上面的脚本更改为：

"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"

这是个有点麻烦的解决办法。您需要显式地设置NODE_ENV以覆盖vue-cli在vue.config.js中设置NODE_ENV的机制，还需要使用vue-cli的选择环境文件的特性的模式参数。