Я использую Vue js и python флягу в качестве моего бэкэнда. Я хочу иметь локальный набор переменных. Как это можно сделать?

Question

Мой файл Vue js. Здесь я использую два URL-адреса из localhost. Я хочу создать файл конфигурации, чтобы, если я вношу изменения в файл конфигурации, я смогу получить те же самые изменения.

<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 разных местах я использую URL-адреса, состоящие из localhost. Когда я буду размещать свой проект, все URL-адреса должны быть изменены. и я должен перейти к каждой строке. Поэтому я ищу файл конфигурации, где я могу вносить изменения, и оттуда будут импортированы 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> 

Answer 2

Поскольку вы используете флягу в качестве внутреннего интерфейса, вы можете просто включить config.js как сценарий, прежде чем включить скрипты VUE

const URL = http://127.0.0.1:5000/ 

Внутри ваших VUE файлов, то вы можете иметь доступ к URL-переменная