在 VueJS 中更改环境变量后，有没有办法热重新加载我的 Vue 页面？

Question

我想为我的应用程序设置不同的模式，因此我创建了不同的 .env 文件来存储我的环境变量。使用这些变量工作正常，唯一的问题是当我更改 .env 文件中的某些内容时，我必须重新启动整个应用程序。我尝试将环境变量外包到一个 .json 文件中以使其与热重载一起工作，但没有用。

这是我的 .env 文件：

NODE_ENV=development
VUE_APP_JSON_FILE=./m.json

我的vue.config.js:

const webpack = require("webpack");

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        VUE_APP_JSON: JSON.stringify(require(process.env.VUE_APP_JSON_FILE))
      })
    ]
  }

我的 .json 文件：

{
  "logo": {
    "picture": "test.jpg",
  }
}

现在我可以像 VUE_APP_JSON.logo.picture 一样调用 .json 中的变量。正如我所说，所有这些都有效，但更改 .env 文件或 .json 文件中的变量不会触发热重载。任何人都知道如何实现这一目标？提前致谢。

Answer 1

TL;DR;

不，你不能

根据我的经验，你做不到，而且永远做不到。因为 .env 文件“有点”被缓存（我真的不知道他们怎么称呼它）但是一旦你编译了你的应用程序你就永远无法更改 .env 然后期待热重载

.env 变量在编译代码本身中静态使用，而不是作为变量，因此在更改 .env 文件中的值时，您没有更改代码上的任何内容。您确实需要再次重新编译项目以更新编译代码正在使用的静态数据。

示例：

你有一个代码：

var Environment = process.env.APP_ENV

并且您的 .env 文件有

APP_ENV=local

你的编译代码看起来像这样

var Environment = 'local'

更新..

您甚至无法 vue.config.js 进行热重载。当您更改该文件上的任何内容时，您也确实需要重新编译.. 因为 vue.config.js 是编译器本身的配置。 webpack 是编译器，vue.config.js 是它的配置。

Answer 2

运行构建然后返回到您的开发版本。它将应用更改。

在 VueJS 中更改环境变量后，有没有办法热重新加载我的 Vue 页面？

Is there a way to Hot Reload my Vue Page after changing an Environment Variable in VueJS?

json

environment-variables

webpack

vue.js

hot-reload