javascript - How does vue-cli build different interface codes according to different back-end interface servers?

Question

During the development process, the address called by the interface in the npm run dev component is an API variable defined by global global as follows:

//Open the development environment
// global.API = '/api';

//Open the test environment
// global.API = '/test';

//Open uat environment
// global.API = '/uat';

//Open the production environment
// global.API = '/www';

Production environment How to automatically change API to production environment variables according to different interfaces when using npm run build?

Answer 1

After pondering over the code generated by vue-cli for a few days, Vue thinks you only need three configurations: development (npm run dev), production (npm run build) and unit testing (npm run test). . .

End of rant.

1. Open config/index.js and modify the env file name in build to obtain it based on the environment variable.
After modification, it will probably look like this:

module.exports = {
  build: {
    env: require('./'+(process.env.VUE_CONFIG||'prod')+'.env'),
    //......

2. Copy prod.env.js into two copies in the config directory, namely uat.env.js and testing.env.js

3. Modify the four files dev.env.js, uat.env.js, testing.env.js, prod.env.js, and add API: '" in the braces /api or uat or something else"', as follows:

module.exports = {
  NODE_ENV: '"production"',
  API: '"/api"'
}

4. Then you can access this variable through process.env.API anywhere.

5. When packaging, first set the environment variable VUE_CONFIG, for example export VUE_CONFIG=uat && npm run build.

Answer 2

https://stackoverflow.com/que...

Answer 3

https://github.com/tonyljl526...
You can take a look at the scaffolding of this project, which is based on express, vue2, and webpack. To achieve your needs, mainly look at config/renderConfig.js