Npm run build in vue packages different domain names according to the environment passing parameter method

This article mainly introduces the Npm run build method in the vue project to package different domain names according to the environment. Use npm run build --xxx to determine different environments according to the passed parameters xxx and give different domain name configurations. Please refer to this article for details.

During project development, the front-end is very troubled when configuring the back-end api domain name. It often appears:

Local development environment: api-dev.demo.com

Test environment: api-test.demo.com

Online production environment: api.demo.com,

This time it is packaged in the Vue.js project to teach you One method:

Use npm run build -- xxx , and determine different environments according to the passed parameter xxx, and give different domain name configurations.

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

Added: HOST: '"dev"'

'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:

Get the parameters passed in:

'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

Note – Yes 2 horizontal bars, followed by parameters, so process.env.HOST will get the parameter 'test',

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

If prod is released and packaged online,npm run build -- prod

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Create ajax image upload by yourself

How to use ajax actions with different namespaces

Ajax return value automatically adds pre tag solution

The above is the detailed content of Npm run build in vue packages different domain names according to the environment passing parameter method. For more information, please follow other related articles on the PHP Chinese website!