javascript - 我使用 Vue js 和 python Flask 作为后端。我想要设置一些局部变量。如何做呢？

Question

我的 Vue.js 文件。这里我使用来自 localhost 的两个 url。我想制作一个配置文件，这样如果我在配置文件中进行更改，我将能够获得相同的更改。

<template>
 <div>
  <div class="global-buttons">
  <a href="http://127.0.0.1:5000/sent_mail/book" target="_blank"><button>See Previously Sent Mail</button></a>
  <button @click="saveData()">Save Current Changes</button>
  <button @click="loadData(savedUrl)">Load Previously Saved Data</button>
  <a href="http://127.0.0.1:5000/mail/book" target="_blank"><button>Send Mail &#9992;</button></a>
 </div>
</template>

在Python中，我们可以轻松地从一个文件导入到另一个文件，但我不知道如何在Vue js中设置这些配置。我有 3 个 Vue 组件，在 6 个不同的地方我使用由 localhost 组成的 url。当我托管我的项目时，所有网址都需要更改。而且我还要去每一行去换。因此，我正在寻找一个可以进行更改的配置文件，并从那里导入网址。

我想要这样

config.js

URL = http://127.0.0.1:5000/

并且在我的模板中

<a href="config.URL + sent_mail/book"

Answer 1

正如我在评论中提到的 - 你可以创建一些外部对象，像这样，我们称之为 config.js

export default {

    config: {
      url: 'myurl'
    }   

}

然后将其导入到您的组件文件中

import ConfigFile from '../config'

然后在您的数据中您可以像这样使用它

data() {
  return {
   url: ConfigFile.config.url
  }
}

然后您可以在模板中使用它的url。

<p>{{ url }}</p>