Vue multi-environment configuration and the method of axios encapsulation
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.
