Vue-cli3.0 how to set configuration items so that after packaging, you can directly modify configuration items to change the request address and so on.

suppose
request address varies according to different websites
when configuring multiple different URLs
how to directly modify the configuration file to change the request address without having to package again

Jun.24,2022

Let's start with a question: what triggers packaging again?

modifying the program code will trigger packaging again

well, let's figure out how many solutions we can deal with without modifying the code.

  1. ajax request the configuration file, which is set through the configuration file.

    1. Note: synchronous and asynchronous problems.
  2. if it's just a domain name change, let's just write the relative address / . / .. /
  3. you say the above is ugly. I use webpack to simplify it, so I want to import config from config . So take a look at externals of webpack .

use environment variables, one is development environment and the other is production environment. The prefix of
environment variables is to create two new files with VUE_APP
, as shown below
clipboard.png

env.development

NODE_ENV=production
VUE_APP_URL=http://www.demo3.com
VUE_APP_DEMO_URL=http://www.demo4.com

in use process.env.VUE_APP_URL or VUE_APP_DEMO_URL

Menu