cli3有三個(gè)配置文件：
image.png
- 配置環(huán)境
本地開發(fā)環(huán)境配置：
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = 'http://192.168.1.202:8088'
#VUE_CLI_BABEL_TRANSPILE_MODULES:true是為了路由懶加載
VUE_CLI_BABEL_TRANSPILE_MODULES = true
注：vue-cli@3 vue-element-admin@4 在新版本中已修改為基于 vue-cli來進(jìn)行構(gòu)建穴店。新版本中你只要在.env.development環(huán)境變量配置文件中設(shè)置VUE_CLI_BABEL_TRANSPILE_MODULES:true就可以了唇撬，但在cli2時(shí)需要在package.json里面加上
"env": {
"development": {
"plugins": ["dynamic-import-node"]
}
}
}
測(cè)試環(huán)境配置：
# just a flag
ENV = 'staging'
# base api
VUE_APP_BASE_API = 'http://192.168.1.202:9000'
正式環(huán)境配置：
# just a flag
ENV = 'production'
# base api
VUE_APP_BASE_API = 'http://81.70.36.105:8083'
- 在請(qǐng)求攔截器的request里面設(shè)置baseURL就可以了
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// 創(chuàng)建一個(gè)axios實(shí)例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // 跨域請(qǐng)求發(fā)送cookie
timeout: 5000 // 請(qǐng)求超時(shí)時(shí)間
})
// 請(qǐng)求攔截
service.interceptors.request.use(
config => {
// 請(qǐng)求前處理
if (store.getters.token) {
// 添加token
config.headers['token'] = getToken()
}
return config
},
error => {
// 失敗處理
console.log(error) // for debug
return Promise.reject(error)
}
)
- package.json文件中配置
"scripts": {
"dev": "vue-cli-service serve",
"dev:prod": "vue-cli-service serve --mode production",
"dev:stage": "vue-cli-service serve --mode staging",
"lint": "eslint --ext .js,.vue src",
"build:prod": "vue-cli-service build",
"build:dev": "vue-cli-service build --mode development",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"new": "plop",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
"test:unit": "jest --clearCache && vue-cli-service test:unit",
"test:ci": "npm run lint && npm run test:unit"
},
注：
npm run dev: 運(yùn)行本地開發(fā)環(huán)境
npm run dev:stage 運(yùn)行測(cè)試環(huán)境
npm run dev:prod 運(yùn)行正式環(huán)境
npm run build:prod 打包正式環(huán)境
npm run build:dev 打包本地開發(fā)環(huán)境
npm run build:stage 打包測(cè)試環(huán)境
