为生产 vue 构建提供环境变量答案

【问题标题】：Provide enviroment variables for production vue build为生产 vue 构建提供环境变量
【发布时间】：2019-11-02 07:36:09
【问题描述】：

我想实现以下目标：

最好的方法是什么。

【问题讨论】：

标签： vue.js

【解决方案1】：

如果您想将一些设置“注入”到捆绑的应用程序中，那么我认为只有使用另一个带有全局对象的 js 文件 (globalConfig.js) 才能实现，例如：

window.myAppSettings = {
    MY_VARIABLE: 'some_value'
}

它们会以某种方式复制到特定环境中的 dist 文件夹中。您还应该准备您的应用以引用该文件：

首先，将此设置对象作为外部库添加到vue.config.js

module.exports = {
    chainWebpack: config => {
        config.externals({
            'my-app-settings': 'myAppSettings'
        })
    }
}

因此您可以在代码中获取设置：

 import mySettingsObject from 'my-app-settings'
 //...
 let myValue = mySettingsObject.MY_VARIABLE

在head部分的index.html文件中添加对globalConfig.js的引用：
```
<script src="<%= BASE_URL %>globalConfig.js"></script>
```

本地发展

您可能需要一些默认设置才能在本地调试您的应用。在这种情况下，您可以使用一些默认值在您的 public 文件夹中创建 localConfig.js。然后将index.html 中的脚本更改为：

 <script src="<%= BASE_URL %><%= VUE_APP_GLOBAL_SETTINGS_VERSION %>Settings.js"></script>

然后在项目根目录下创建两个文件.env.local和.env.production：

// .env.local
VUE_APP_GLOBAL_SETTINGS_VERSION=local

和

// .env.production
VUE_APP_GLOBAL_SETTINGS_VERSION=global

因此，当您运行 npm run serve 时，它将加载您的本地配置，而您的应用程序将加载 localSettings.js。当它使用npm run build 构建时，它将加载globalSettings.js，因为默认情况下构建使用生产模式。

【讨论】：

【解决方案2】：

如果您使用Vue CLI 3 创建项目，您可以这样做。

确保您的设置文件命名为.env 并将其放在您的项目根目录中。
在.env 文件中，您的变量应以“VUE_APP_”为前缀

VUE_APP_SOMEKEY=SOME_KEY_VALUE.
使用process.env.* 访问它们。

console.log(process.env.VUE_APP_SOMEKEY) // SOME_KEY_VALUE

这里有更多关于 vue 环境变量的信息：Vue CLI 3 - Environment Variables and Modes

编辑： 对不起。我可能误解了你的问题。如果您的设置文件位于 dist 文件夹中，此解决方案将不起作用。

【讨论】：