Question

这看起来很愚蠢，但我设置如下：

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来处理应用程序配置是一个坏主意。这里有更规范的方法是什么？

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

Answer 2

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

Answer 3

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

我可以确认在 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 应该自动执行。不知道

Answer 4

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

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

vuejs配置：使用全局变量？

4 个答案: