时间戳

首页 > 解决方案 > 如何将配置文件导入 Vue.JS+Vuex

vue.js - 如何将配置文件导入 Vue.JS+Vuex

问题描述

在调用 Vue 之前，我在 main.js 文件中设置了配置：

Vue.prototype.$api_url = process.env.NODE_ENV === 'production' ? 'https://api.xxx.com' : 'https://yyy.test:8443'

如果我访问this.$api_url任何 Vue 文件，它就可以工作。

但是在 store.js (Vuex) 中，它是另一个渲染的 Vue 实例，所以我无法访问this.$api_url.

如何在文件中设置配置和Vue.use(configs.js)？

我应该在 configs 文件中做什么才能将其变量放入其中main.js/store.js？

谢谢你。

标签： vue.jsvuex

解决方案

创建一个独立的 config.js 文件并从该文件中导出您的配置对象。并在需要配置的地方导入配置。如果您希望在所有 Vue 组件中提供相同的配置，也可以将相同的配置分配给 Vue 的原型。

更新：

因此，您可以这样做：

在你的 config.js

let config;

if (process.env.NODE_ENV === "production") {
  config = {
    $api_url: "https://api.xxx.com",
    timeoutDuration: 30000,
    someOtherProps: 'xyz'
  };
} else {
  config = {
    $api_url: "https://yyy.test:8443",
    timeoutDuration: 1000,
    someOtherProps: 'abc'
  };
}

export { config }

在你的 main.js

import { config } from 'config';

Vue.prototype.appConfig = config

使用this.appConfig.$api_url你想在 .vue 文件中使用的任何方式

在您的 store.js 中

import { config } from 'config';

使用config.$api_url任何你想使用的方式

推荐阅读