Vue environment passes parameters to package different domain name code analysis

This time I will bring you an analysis of the code for packaging different domain names when passing parameters in the vue environment. What are the precautions for packaging different domain names when passing parameters in the vue environment? The following is a practical case, let's take a look.

npm run build -- xxx to determine different environments and give different domain name configurations based on the passed parameter xxx.

1. Modification of /config/dev.env.js in the project:

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 HOST: '"dev"'
})

2. Modification of /config/prod.env.js in the project:

'use strict'
let HOST = process.argv.splice(2)[0] || 'prod';
console.log(HOST);
module.exports = {
 NODE_ENV: '"production"',
 HOST: '"'+HOST+'"'
}

3. Modification of ajax encapsulation in the project ：

/**
** 设置API接口域名
**/
let apiUrl = '';
// 根据 process.env.HOST 的值判断当前是什么环境
// 命令：npm run build -- test ，process.env.HOST就设置为：'test'
let HOST = process.env.HOST;
HOST = HOST === 'prod' ? '' : '-' + HOST;
apiUrl = 'http://api'+HOST+'.demo.com';
axios.defaults.baseURL = apiUrl;

4. Finally type the command:

npm run build -- test

apiUrl = 'http://api-test.demo.com'

npm run build -- prod

apiUrl = 'http://api.demo.com'

vue2 Implementation of Shopping Cart and Address Selection Case Analysis

vue Implementation of Select All and Inverse Selection Function Case Detailed explanation

The above is the detailed content of Vue environment passes parameters to package different domain name code analysis. For more information, please follow other related articles on the PHP Chinese website!