时间戳

首页 > 解决方案 > Vue.js 环境配置

vue.js - Vue.js 环境配置

问题描述

我不想使用 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）？也许您还知道更好的方法？

标签： vue.jsnpmbuildconfiguration

解决方案

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

我曾经遇到过类似的情况，需要调整一些预设而不是每次都重建项目。我最终移动了在异步 Axios 函数中呈现应用程序的 Vue 对象。当然它会影响加载时间，因为它等待 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)
})

推荐阅读