web-dev-qa-db-fra.com

configuration de vuejs: utilisation d'une variable globale?

Cela semble stupide, mais je l’ai configuré comme ceci:

dans config/index.js:

module.exports = {
    API_LOCATION: 'http://localhost:8080/api/'
}

puis dans src/app.js j'ai:

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource';

Vue.use(VueRouter);
Vue.use(VueResource);

const App = require("./app.vue");
const home = require("./components/home.vue");
const config = require('../config');
window.config = config;

Ensuite, dans src/components/home.vue, j'ai un bloc de script qui l'utilise de la manière suivante:

<script>
    module.exports = {
        data: function() {
            return {
                obj: null
            }
        },
        created: function() {
            this.$http.get(config.API_LOCAITON + '/call').then(res => {
                // Do some business
            }, res => {
                // Handle some error
            });
        }
    }
</script>

Cela fonctionne mais cela me semble une mauvaise idée d’utiliser window pour gérer une configuration d’application. Quelle est l'approche la plus canonique ici?

javascriptnode.jsvue.js
6
Wells

Importez-le.

<script>
    import config from "../config"

    module.exports = {
        data: function() {
            return {
                obj: null
            }
        },
        created: function() {
            this.$http.get(config.API_LOCATION + '/call').then(res => {
                // Do some business
            }, res => {
                // Handle some error
            });
        }
    }
</script>

Ou juste l'emplacement.

<script>
    import { API_LOCATION } from "../config"

    module.exports = {
        data: function() {
            return {
                obj: null
            }
        },
        created: function() {
            this.$http.get(API_LOCATION + '/call').then(res => {
                // Do some business
            }, res => {
                // Handle some error
            });
        }
    }
</script>
5
Bert

PROD: config/prod.env.js ajouter votre VAR='"value"'

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_LOCATION: '"https://production URL"'
}

DEV: config/dev.env.js ajouter votre VAR='"value"'

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_LOCATION: '"http://localhost"'
})

Votre variable sera disponible en process.env.API_LOCATION ou process.env.VAR_NAME

2
erajuan

Définissez simplement ip path (ou localhost) dans le stockage local lorsque la connexion est réussie et obtenez une valeur du stockage local où vous avez besoin tout au long du projet.

// Set value in IpAdress localstorage.setItem('IpAddress','192.168.100.100:8080');

// Get value from IpAddress localstorage.getItem('IpAddress');

dans mon cas, tout le chemin ressemble à: localstorage.getItem('IpAddress')+/api/controller/method|

0
Wasim Akram