0
388
ViewsUsando variables de entorno en vue
He visto muchas otras preguntas sobre este tema, pero ninguna me ha ayudado.
Con vue, quiero usar una API, pero la URL cambiará cuando la aplicación esté en producción, por lo que en el archivo .env definí una BASE_URL, pero cuando la uso en un componente de vue, dice que el proceso no está definido.
Lo intenté con webpack.DefinePlugin en webpack.config.js o nombré las variables de entorno como VUE_APP_BASE_URL pero nada parece funcionar.
export default { name: "Dashboard", data() { return { data: undefined } }, created() { axios .get(process.env.BASE_URL + "/api/xxxxx") .then(res => this.data = res.data) }, }; 
webpack.config.js:
plugins: [ new VueLoaderPlugin(), new webpack.DefinePlugin({ 'process.env.BASE_URL': JSON.stringify(process.env.BASE_URL), }) ] .env: BASE_URL=http://localhost:3000/
versión del paquete web: 5.48.0
3 answers
Answer question0
Puede obtener la URL base de la ventana del sitio desde
window.location.origin Creo que las variables de entorno solo funcionan en el proceso y se pierden después de la compilación.
0
Las alegrías de webpack. Con esta respuesta como referencia, cambie la sección del complemento de su paquete web para que sea
plugins: [ new webpack.ProvidePlugin({ process: 'process/browser', }), ] e instalar el módulo de process
yarn add -D process
Parece que eso debería pasar todo el objeto del proceso a la aplicación por usted. Si eso no funciona, la respuesta debajo de esa muestra otra forma, pero requiere instalar dotenv.
Otra información útil, si está utilizando Vue3, debe prefijar la variable en todas partes. VUE_APP_BASE_URL="***" en el archivo .env y process.env.VUE_APP_BASE_URL cuando lo esté usando en cualquier otro lugar
0
Puede usar sus variables env en un archivo .js separado para, por ejemplo, una instancia de axios como:
import axios from 'axios' const httpClient = axios.create({ baseURL: process.env.VUE_APP_BASE_URL, timeout: 10000, // indicates, 10000ms ie. 10 second body: { 'Content-Type': 'application/x-www-form-urlencoded' } }) export default httpClientY luego úsalo en tu archivo Vue así
import httpClient from '../httpClient' export default { name: "Dashboard", data() { return { data: undefined } }, async created() { const axiosResponse = await httpClient.get('/api/xxxx') this.data = axiosResponse.data.yourData } };EDITAR: debe comenzar su variable env con "VUE_APP_"