Vue.js 环境配置

Posted 2023-02-22

【中文标题】Vue.js 环境配置

【英文标题】：Vue.js environment configuration

【发布时间】：2019-07-04 01:31:01

【问题描述】：

我不想使用 Vue.js 创建客户端应用程序。目前我面临一个问题：如何获取我的后端服务的地址？

我对应该回答该问题的解决方案有一个主要限制：最终的客户端工件（构建过程的结果，“vue-cli-service build”）必须与环境无关。这个很重要！这意味着绝对不应该内置特定于环境的信息。如果我的后端服务的地址发生变化，则不必构建新的客户端工件。必须可以重新配置生产环境并重用当前的客户端工件。

我的方法是添加一个额外的配置文件，该文件由提供我的 Vue.js 客户端的同一 Web 服务器提供：/configuration.json 或类似的东西。这个配置文件可以包含我需要的信息。这种方法可以分为 3 个子任务： (a) 向 Vue.js 客户端添加功能以从 Web 服务器（也提供客户端）读取 configuration.json。这应该很容易。 (b) 想办法让生产网络服务器传递这个 configuration.json。我已经对此有了一些想法。 (c) 想办法让本地开发服务器传递额外的configuration.json。

我现在最大的问题是 (c)。不知道如何配置本地开发服务器，由“vue-cli-service serve”启动。

任何想法如何解决（c）？也许你也知道更好的方法？

【参考方案1】：

我只是对另一个问题给出以下答案，但它也可能适用于您的问题。如果您需要从 JSON 文件加载特定预设。我猜如何生成该 JSON 文件是一个单独的问题。

我曾经遇到过类似的情况，需要调整一些预设 无需每次都重建项目。我最终移动了 Vue 在异步 Axios 函数中呈现应用程序的对象。当然 它会影响加载时间，因为它会等待 JSON 文件 加载，在我的情况下，这不太重要。这是对此类的总结 设置。

axios.get('./config.json')
.then(function(response) 
    let config = response.data
    //commit data to vuex store for example

    new Vue(
        store,
        render: h => h(App)
    ).$mount('#app')
)
.catch(function(error) 
    console.log(error)
)