cli3有三个配置文件：
image.png
- 配置环境
本地开发环境配置：
# 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来进行构建。新版本中你只要在.env.development环境变量配置文件中设置VUE_CLI_BABEL_TRANSPILE_MODULES:true就可以了，但在cli2时需要在package.json里面加上
"env": {
"development": {
"plugins": ["dynamic-import-node"]
}
}
}
测试环境配置：
# just a flag
ENV = 'staging'
# base api
VUE_APP_BASE_API = 'http://192.168.1.202:9000'
正式环境配置：
# just a flag
ENV = 'production'
# base api
VUE_APP_BASE_API = 'http://81.70.36.105:8083'
- 在请求拦截器的request里面设置baseURL就可以了
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// 创建一个axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // 跨域请求发送cookie
timeout: 5000 // 请求超时时间
})
// 请求拦截
service.interceptors.request.use(
config => {
// 请求前处理
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: 运行本地开发环境
npm run dev:stage 运行测试环境
npm run dev:prod 运行正式环境
npm run build:prod 打包正式环境
npm run build:dev 打包本地开发环境
npm run build:stage 打包测试环境
