3👍
I’ve faced a similar problem with the undefined
part in URL.
The reason was that I did not have the MIX_APP_URL
variable set up in my .env
Laravel configuration file.
The way ${process.env.MIX_APP_URL}
works is that an environment variable can be injected by Node at runtime, in this case the application url.
One reason we want the MIX_APP_URL
in .env
is that any developer using your application can easily set it up and only modify the MIX_APP_URL
variable.
The other, very important reason is that the URL will differ for a local server and for production – in this case the solution to change it to a static URL would not work and would be prone to an error in a production environment.
One thing to notice though, when running the NPM watch
task, the change of an .env
variable does not apply immediately, the watch
task has to be restarted.
1👍
It turns out my error was from my app.js, the code is:
axios.defaults.baseURL = `${process.env.MIX_APP_URL}/api`
After I changed it to:
axios.defaults.baseURL = `http://127.0.0.1:8000/api`
It worked, the undefined thingy is now gone. I didn’t know why the first one didn’t work but meh.
Reddit user /u/mrcat323 helped me get an answer in /r/vuejs.