How to package different domain names with Npm run build

This time I will show you how to package different domain names with Npm run build. What are the precautions for Npm run build to package different domain names? The following is a practical case, let’s take a look.

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, and I will teach you how to do it:

Use npm run build -- xxx , according to the passed parameter xxx to determine different environments 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'

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Koa2 makes file upload and download function

What functions is implemented by new() in JS

Use jQuery to preview locally when uploading images

The above is the detailed content of How to package different domain names with Npm run build. For more information, please follow other related articles on the PHP Chinese website!