获取vue文件中的配置值

Question

可能是一个非常简单的问题：我需要从 vue 文件的 html 块中获取配置值。

我有这个简单的config.js

const env = process.env.NODE_ENV

const development = {
  images: {
    server: "http://localhost:4001",
  }
}

const production = {
  images: {
    server: "http://someimageserver.com",
  }
}

const config = {
  development,
  production,
}

module.exports = config[env]

而这个简单的vue.js

<template>
  <div>
      <img :src="`${config.images.server}/images/someimage.jpg`"/>
  </div>
</template>

在运行时，以上抛出

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'images')

我应该怎么做才能完成这项工作？提前致谢

注意：我可以从脚本块中获取配置值，这非常有效，例如

import config from "../../config"
...
var c = config.images.server

更新： 使用 vue 3，可以通过添加

轻松实现这一点

import config from "../config"
app.config.globalProperties.$config = config

到 main.js 文件。从那时起，$config 可以在所有文件的模板和脚本中使用。资料来源：https://v3.vuejs.org/guide/migration/global-api.html#vue-prototype-replaced-by-config-globalproperties

Answer 1

在Vue中，你需要初始化一个变量并将你导入的赋值给它，最终return这个变量。如下所示：

Vue2:

import config from "../../config"

export default {
  data() {
    return {
      config: config
    }
  }
}

Vue3:

import config from "../../config"

export default {
  setup() {
    return {
      config
    }
  }
}

那么模板中的 url 应该可以正常工作。

------------------------更新-------------------- ----

如果你想全局使用配置，你可以将其注册为插件。

创建plugin.js

import config from "../../config"

export const Config = {
  install(Vue, options) {
    Vue.prototype.$config = function() {
      return config
    }
  }
}

然后，在您的main.js中添加以下代码

import * as Plugins from '@/plugin.js'

Vue.use(Plugins.Config.install)

然后你可以在像 $route 这样的模板中使用 $config 而无需任何其他导入。当然你可以在 plugin.js 中编写其他全局函数并在 main.js.

中注册它们中的每一个

获取vue文件中的配置值

Get config value in vue file

vue.js

node-config