Vue.js 为生产vue构建提供环境变量

我希望实现以下目标：

Vue应用程序是使用

npm build

构建的

然后将/dist结果复制到某个环境中

在这个环境中，我有一些名称=值设置的静态设置文件

Vue应用程序应从其运行的本地文件夹中读取此设置，或默认为某些设置

---

执行此操作的最佳方法是什么。

如果您使用

Vue CLI 3

创建项目，您可以这样做

确保设置文件名为

.env

，并将其放置在项目根目录中

在

.env

文件中，变量的前缀应为“VUE_APP_”

VUE\u APP\u SOMEKEY=SOME\u KEY\u VALUE

使用

process.env.*

访问它们

console.log（process.env.VUE\u APP\u SOMEKEY）//SOME\u KEY\u值

以下是有关vue中环境变量的更多信息：

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

如果您希望将某些设置“注入”到捆绑应用程序中，则我认为只有使用另一个具有全局对象的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>

然后在项目根目录

.env.local

和

.env.production

中创建两个文件：

// .env.local
VUE_APP_GLOBAL_SETTINGS_VERSION=local

及

因此，当您运行

npm run service

时，它将加载您的本地配置，而您的应用程序将加载

localSettings.js

。

---

当它使用

npm run build

构建时，它将加载

globalSettings.js

，因为构建默认使用生产模式。

使用模块如何在生产中运行应用程序？节点，nginx？什么是“Vue应用程序应读取…”？Vue应用程序是一个前端应用程序，您只能在生成过程中提供环境变量。@Max Sinev:应用程序已最小化为一组静态文件。。。我想添加一个我自己的文件作为设置的来源我知道这一点。。。不是我想的那样。

// .env.local
VUE_APP_GLOBAL_SETTINGS_VERSION=local

// .env.production
VUE_APP_GLOBAL_SETTINGS_VERSION=global