如何设计构建后配置的 vue-cli 应用程序？

How to design a vue-cli app that be configured after build?

我有一个可用的 vue-cli 应用程序，我可以毫无问题地构建它。现在，我想打包一个将部署在多个服务器上的构建。我的问题是，根据服务器的不同，我必须调整一些简单的变量（服务器端口、API 令牌等）。

显然，由于上下文的原因，它不是 运行 多个构建（基于 .env 文件或其他）的合适解决方案。我经常在现场获取设置信息并且必须快速配置它们。

在使用 Webpack 及其所有底层编译过程之前，我有一个嵌入设置的经典 js 文件，我想生成类似的东西。据我所知，在 public 文件夹中创建的文件无法从 vue 组件（使用 import 指令）访问，并且一旦缩小，它就不是调整设置的解决方案。

是否可以告诉 vue-cli3 或 webpack 保留特定文件或文件夹 "as is"？或者也许有更清洁的解决方案？

好吧，以防万一有一天有人需要做类似的事情，这是我的解决方案：

  1. 我在 public 目录中创建了配置文件，例如 settings.json

  2. 在 App.vue 组件中，我指定了一个 mounted() 方法，该方法将在组件启动时自动调用（如果需要，请参阅 VueJs 组件生命周期）。这个方法：

    1. 异步查询静态settings.json文件获取当前文件（我用的是Axios）

    2. 将值存储在专门的存储部分（参见 VueX 或任何更简单的存储结构）。在我的例子中，这看起来像：

长话短说：

Store.ts

let store = {
    ...

    // Will receive our config.json file content
    settings: {},
};

export default store;

App.vue

mounted() {
    Axios.get('./settings.json')
        .then((response) => {
            Store.Settings = response.data;
         })
}

这可能并不完美，但不需要外部技术，可以从每个组件访问设置，就像您的状态在商店中一样。

如果这听起来很奇怪或者有更好的解决方案，请告诉我。