时间戳

首页 > 解决方案 > 为生产 vue 构建提供环境变量

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

问题描述

我想实现以下目标：

  1. 一个 Vue 应用程序是用npm build,
  2. 然后 /dist 结果被复制到某个环境
  3. 在这个环境中，我有一些带有 name=value 设置的静态设置文件
  4. Vue 应用程序应该从运行它的本地文件夹中读取此设置或默认为某些设置

做这个的最好方式是什么。

标签： vue.js

解决方案

如果您想向捆绑的应用程序“注入”一些设置，那么我认为只有使用另一个globalConfig.js具有全局对象的 js 文件（）才有可能，例如：

window.myAppSettings = {
    MY_VARIABLE: 'some_value'
}

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

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

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

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

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

  2. 在 head 部分添加对globalConfig.jsin文件的引用：index.html

    <script src="<%= BASE_URL %>globalConfig.js"></script>

地方发展

您可能需要一些默认设置才能在本地调试您的应用程序。在这种情况下，您可以localConfig.js在public文件夹中创建一些默认值。然后将您的脚本更改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，因为默认情况下构建使用生产模式。

推荐阅读