webpack provides two configuration files for production environment and online environment. Usually, one interface is used in development, and the project will automatically switch to another interface after it goes online. Not much nonsense, as shown in the figure below. The first step is to find dev.env.js under the config folder in the vue-cli project. The default is as follows:
Then we need to add the interface domain name used in the development environment to request background data, as shown below:
url_api is set by myself and can be customized. The following path is the interface in your own development environment.
Then find prod.env.js, and the default is as follows:
Add the configuration of online request interface in this file:
Finally, call this interface in your own packaged axios:
User-defined variable = process.env.url_api (this is customized in the config file just now), and splice the url into the packaged axios. Finally, when npm run dev in the production environment, it will automatically call the interface just defined in dev.env.js, and when npm run build to package, it will automatically call the interface configured in prod.env.js.
in addition: cross-domain issues
? Maybe some small partners have configured cross-domain proxy in vue, which leads to the invalidation of proxy proxy in the spliced url, and the cross-domain problem still occurs. My personal idea to solve this problem is that the proxy configuration remains unchanged, and only the local interface needs to be replaced with an empty string in dev.env.js There will be no cross-domain problems in the development environment. If you don't understand, you can ask me. If you have a better plan, I hope you can give me your advice. Thank you.
link: /p/6393cf897663