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

【问题标题】：How to design a vue-cli app that be configured after build?如何设计构建后配置的 vue-cli 应用程序？
【发布时间】：2019-10-15 08:48:04
【问题描述】：

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

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

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

是否可以告诉 vue-cli3 或 webpack 保持特定文件或文件夹“原样”？或者也许有更清洁的解决方案？

【问题讨论】：

【解决方案1】：

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

我在公共目录中创建 un config 文件，例如 settings.json
在 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;
         })
}

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

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

【讨论】：