vuejs 配置：使用全局变量？答案

【问题标题】：vuejs configuration: using a global variable?vuejs 配置：使用全局变量？
【发布时间】：2017-11-28 17:17:29
【问题描述】：

这看起来很愚蠢，但我是这样设置的：

在config/index.js:

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

然后在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;

然后在src/components/home.vue 中，我有一个使用它的脚本块：

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

这可行，但我觉得使用window 处理应用程序配置是个坏主意。这里更规范的方法是什么？

【问题讨论】：

标签： javascript node.js vue.js

【解决方案1】：

导入它。

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

或者只是位置。

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

【讨论】：

酷，有没有更全球化的方法？将在所有组件中使用config 对象并且每次导入似乎效率低下...
@Wells 这是之前的my answer。就像在主脚本中使用 Vue.protoype.$config = config 一样简单。
太棒了！ Vue.prototype.$config 与 new Vue({data: config}) 方法是否存在争论？
@Wells 如果您将它放在原型上，它将通过this.$config 在每个组件中可用，并且它不会是反应式的。如果将其放在数据上，则必须将其传递给组件，但它将是反应性的。在你的情况下，它基本上是一个全局值，我会把它放在原型上，或者按照上面的描述导入它。

【解决方案2】：

产品：config/prod.env.js 附加您的VAR='"value"'

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

DEV：config/dev.env.js 附加您的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"'
})

您的变量将在process.env.API_LOCATION 或 process.env.VAR_NAME

【讨论】：

如果您使用 webpack，则为 true，但如果您不使用，如何加载 dev/prod 环境？

【解决方案3】：

TL;DR; Vue 中的全局配置是使用您在应用程序的路由文件夹（package.json 旁边）中创建的 .env 和 .env.production 文件完成的

我可以确认在 Vue 中使用 Vue CLI .env 文件会在您运行 npm run serve 时自动加载

但请记住我检查过的以下内容：

.env 文件中的变量必须以 VUE_APP 前缀开头才能被自动提取并在代码中以 process.env.VUE_APP_MYVAR 的形式提供
如果您要定义 JS 对象，例如 'VUE_APP_MY_OBJECT={a:100}then you'll have to parse it to JSON before using it in the codeJSON.parse(process.env.VUE_APP_MY_OBJECT)`
如果你不使用 Webpack，你可能需要稍微摆弄它来挑选这些配置文件。根据this answer，看起来 webpack 应该自动完成。不知道

【讨论】：

【解决方案4】：

登录成功后，只需在本地存储中设置 ip 路径（或 localhost），并从项目中需要的本地存储中获取价值。这里是你如何在 localstage 中设置值。

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

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

在我的情况下，整个路径看起来像： localstorage.getItem('IpAddress')+/api/controller/method|

【讨论】：