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

Question

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

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

如果我在任何 Vue 文件中访问

this.$api_url

，它就会起作用。

但是在store.js（Vuex）中，渲染的是另一个Vue实例，所以我无法访问

this.$api_url

。

在文件中设置配置怎么样？

Vue.use(configs.js)

？

我应该在配置文件中做什么才能在

main.js/store.js

中获取其变量？

谢谢你。

Answer 1

创建一个独立的 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

无论你想用什么方式

Answer 2

如果您使用 Vite，您可以使用以下命令外部化配置文件：

例如在

config/settings.js 中创建您的配置 js 模块

const config = {
    apiUrl:'https://example.com/api/v3'
};

export { config }

在

vite.config.js 中将文件标记为外部

export default defineConfig({

.
.
.
  build: {
    rollupOptions: {
      external: ['/config/settings.js']
    }
  }
})

访问您的

main.js

 中的文件并全局存储设置

import { config } from './config/settings.js'
app.config.globalProperties.config = config