0

可能是一个非常简单的问题：我需要从 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

4

1 回答 1

1

在 Vue 中，您需要初始化一个变量并将您导入的内容分配给它，并最终返回此变量。如下所示：

Vue2：

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

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

Vue3：

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

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

然后模板中的 url 应该可以正常工作。

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

如果要全局使用 config，可以将其注册为 Plugin。

创建 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)

然后你可以在没有任何其他导入的情况下$config在模板中使用。$route当然，您可以在其中编写其他全局函数plugin.js并将它们中的每一个注册到main.js.

于 2021-11-18T03:16:01.303 回答