Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points of vue multi-environment configuration and axios encapsulation methods. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

1. Create a profile

Create .env. Under the project root. Environment name for example: .env.prd .env.dev

Configure api paths for different environments in the configuration file

# env

NODE_ENV = 'development'

# flag

VUE_APP_FLAG = 'dev'

# domain url API domain name, static resource address

VUE_APP_APIDOMAIN = 'http://localhost:8081'

VUE_APP_ASSETSURL =''

two。 In the config directory

Index.js: export the address in the current environment configuration

Let envInfo = process.env / / process.env get the current startup environment configuration

Let [apiDomain,assetsUrl] = [envInfo.VUE_APP_APIDOMAIN,envInfo.VUE_APP_ASSETSURL] / / get the value in the configuration

Export default {

ApiDomain

AssetsUrl

}

UrlMap.js:

/ * *

* @ desc remote interface address and local mock address mapping table

* key: interface address

* value: local address

, /

Const mockBaseUrl = 'http://rap2api.taobao.org/app/mock'

Export default {

'/ user/login': mockBaseUrl +' / 223948 universe login'

'/ user/info': mockBaseUrl +' / 223948 Universe

'/ user/logout': mockBaseUrl +' / 223948 URL logout'

'/ table/list': mockBaseUrl +' / 223948 Maxima TableList'

}

3. Write the tool method to obtain the address

Create a get-url.js under the utils directory

Import config from'@ / config'

Import urlMap from'@ / config/urlMap'

/ * *

* @ desc remote interface address and local mock address mapping table

* key: interface address

* value: local address

, /

Export default function getUrl (url,api=1,domainType=1) {

/ / api: 0 mock service 1 interface service

/ / domainType: 1 take apiDomain to customize other domain names

Let domain =''

If (domainType = = 1) {

Domain = config.apiDomain

}

Return api===0? UrlMap [url]: domain+url

}

4. Import the getUrl method in js and use the

Import request from'@ / assets/js/utils/request'

Import getUrl from'@ / assets/js/utils/get-url'

Export function getAccountList (data) {

Return request ({

Url: getUrl ('/ person/getPAList')

Method: 'post'

Data

})

}

5.request is an encapsulated axios instance

In request under utils

Import axios from 'axios'

Import {MessageBox} from 'element-ui'

/ / create an axios instance

Const service = axios.create ({

Timeout:5000

})

/ / request interceptor. It can be improved later.

Service.interceptors.request.use (config= > {

/ / do something before request is send

/ / if (store.getters.token) {

/ / config.headers ['token'] = getToken ()

/ /}

Return config

}, error= > {

/ / do something with request error

Console.log (error)

Promise.reject (error)

})

/ / response interceptor

Service.interceptors.response.use (

Response = > {

Const res = response.data

If (res.code! ='0') {

/ / if (res.code===' 4001' | | res.code==='4002') {

/ / MessageBox.confirm ()

/ /}

/ / add some processing by yourself

} else {

Return res.content

}

}

)

Export default service

6. Call method

Since the getAccountList method in the above example returns an axios instance (that is, a Promise object), the call is as follows, which can be executed using .then or .catch

Created:function () {

GetAccountList (this.personAccountDTO) .then (result= > {

This.account = result

})

}

7. Add Startup Project

Add startup scripts dev and prd with environment configuration in package.json

{

"scripts": {

"serve": "vue-cli-service serve"

"build": "vue-cli-service build"

"lint": "vue-cli-service lint"

"dev": "vue-cli-service serve-mode dev"

"prd": "vue-cli-service serve-mode prd"

}

.

8. Start the project

The configuration in the npm run dev # .env.dev file takes effect

These are all the contents of this article entitled "vue multi-environment configuration and axios encapsulation". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.