提供用于生产vue的环境变量

Question

我想实现以下目标：

1. 使用 ，
构建Vue应用程序
2. 然后将/ dist结果复制到某个环境
3. 在此环境中，我有一些带有name = value设置的静态设置文件
4. Vue应用程序应从其正在运行的本地文件夹中读取此设置，或者默认为某些设置

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

Answer 1

如果您想向捆绑的应用程序“注入”某些设置，那么我认为只有使用具有全局对象的另一个js文件（globalConfig.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. 在头部分的globalConfig.js文件中添加对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。

Answer 2

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

1. 确保您的设置文件名为.env，并将其放置在项目根目录中。

2. 在.env文件中，您的变量应带有“ VUE_APP_”前缀

   VUE_APP_SOMEKEY=SOME_KEY_VALUE。

3. 通过process.env.*访问它们。

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

以下是有关vue中的环境变量的更多信息：Vue CLI 3 - Environment Variables and Modes

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