vuejs 配置：使用全局变量？

Posted 2023-02-22

技术标签:

【中文标题】vuejs 配置：使用全局变量？【英文标题】：vuejs configuration: using a global variable? 【发布时间】：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 处理应用程序配置是个坏主意。这里更规范的方法是什么？

【问题讨论】：

【参考方案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:100then 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 中设置值。