wake-up-neo.com

vuejs Konfiguration: Verwenden Sie eine globale Variable?

Dies scheint dumm, aber ich habe es so eingerichtet:

in config/index.js:

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

dann habe ich in src/app.js:

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;

Dann habe ich in src/components/home.vue einen Skriptblock, der es wie folgt verwendet:

<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>

Das funktioniert, aber ich halte es für eine schlechte Idee, window für eine Anwendungskonfiguration zu verwenden. Was ist der kanonischere Ansatz hier?

6
Wells

Importiere es.

<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>

Oder einfach nur die Lage.

<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 füge deinen VAR='"value"' hinzu

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

DEV: config/dev.env.js füge deinen VAR='"value"' hinzu

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

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

Ihre Variable ist in process.env.API_LOCATION oder process.env.VAR_NAME verfügbar.

2
erajuan

Legen Sie einfach den IP-Pfad (oder localhost) im lokalen Speicher fest, wenn Sie sich erfolgreich anmelden, und holen Sie sich einen Wert aus dem lokalen Speicher, den Sie im gesamten Projekt benötigen.

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

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

in meinem Fall sieht der ganze Pfad wie folgt aus: localstorage.getItem('IpAddress')+/api/controller/method|

0
Wasim Akram