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 as follows: // Open the development environment // global.API = '/api'; // Open the test environment // global.API = '/test'; // open uat environment // global.API = '/uat'; ...

怪我咯 · Answer

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

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

迷茫 · Answer

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