Home > Web Front-end > JS Tutorial > body text

Select different domain names according to the environment parameter passing method

php中世界最好的语言
Release: 2018-04-20 17:36:45
Original
2094 people have browsed it

This time I will introduce to you the methods of selecting different domain names according to the environment parameter passing method and selecting different domain names according to the environment passing parameter method. 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"'
})
Copy after login

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+'"'
}
Copy after login

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;
Copy after login

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'
Copy after login

If prod is released and packaged online,

npm run build -- prod

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">apiUrl = 'http://api.demo.com'</pre><div class="contentsignin">Copy after login</div></div> 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:

Convert strings with html fields into HTML tags


js implements front-end and back-end transmission of Json

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!