Considerando que você esta utilizando o cli.vuejs.org para gerar seu projeto e fazer o build,
eu sugiro usar arquivos de variáveis de ambiente, .env
Imita a utilização de variáveis de ambiente do node.
Então você cria seus arquivos .env
para seus ambientes(desenvolvimento, homologação e produção) com as variáveis:
NODE_ENV=development
VUA_APP_API_BASE_URL=http://localhost:8080/api
VUE_APP_ é o prefixo obrigatório para as variáveis serem injetadas no seu app
E ai no seu código é só utilizar process.env.VUE_APP_API_BASE_URL
Ai ja não sei se é possível utilizar o process.env.VUE_APP_X
em expressões no <template>
, porém sugiro utilizar computed properties em seus componentes ou até criar um componente só para abstrair isso.
<template>
<img :src="src" />
</template>
<script>
export default {
name: 'Image',
props: ['path'],
computed: {
src({ path }) {
return `${process.env.VUE_APP_API_BASE_URL}/${path}`;
}
}
}
</script>
E usa o componente:
<Image :path="`/uploader/hotels/${hotel.photo}`"/>
E no lugar onde você define o base url do axios, substitui por process.env.VUE_APP_API_BASE_URL
.