json - 在 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

长话短说；

不，你不能

---

根据我的经验，你不能，而且你永远也做不到。因为 .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 是它的配置。