0
148
ViewsUsing environment variables in vue
I have seen many other questions on this topic, but none have helped me.
With vue I want to use an api, but the url will change when the app is in production so in the .env file I have defined a BASE_URL, but when I use it in a vue component, it says that procces is not defined.
I've tried with webpack.DefinePlugin in webpack.config.js or naming the environment variables as VUE_APP_BASE_URL but nothing seems to work.
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/
webpack version: 5.48.0
3 answers
Answer question0
You can get the window's base-url of the site from
window.location.origin
I think enviroment variables only work in the process and are lost after compilation.
0
The joys of webpack. With this answer as a reference, change your webpack plugin section to be
plugins: [
new webpack.ProvidePlugin({
process: 'process/browser',
}),
]
and install the process module
yarn add -D process
It looks like that should pass the entire process object through to the app for you. If that doesn't work, the answer below that one shows another way, but it requires installing dotenv.
One other useful bit of information, if you're using Vue3, you need to prefix the variable everywhere. You'd use VUE_APP_BASE_URL="***" in the .env file, and process.env.VUE_APP_BASE_URL when you're using it anywhere else
0
You can use your env variables in a seperate .js file for e.g an axios instance like:
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 httpClient
And then use it in your Vue file like this
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
}
};
EDIT: You need to start your env variable with "VUE_APP_"