typescript - 如何设计一个可以在构建后配置的 vue-cli 应用？

我有一个可以正常工作的 vue-cli 应用，我可以毫无问题地进行构建。现在，我想打包一个可以部署到多个服务器的单一构建版本。我的问题是，根据不同的服务器，我需要调整一些简单的变量（服务器端口、API 令牌等）。

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

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

有没有可能告诉 vue-cli3 或 webpack 保持一个特定的文件或文件夹“原样”？或者可能有一种更干净的解决方案？

答案＃1

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

1. 我在公共目录中创建了一个配置文件，比如 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;
         })
}

这可能不完美，但不需要外部技术，每个组件都可以访问设置，就像你的状态在存储中一样。

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