vue-cli3 项目从搭建优化到docker部署 (3)

在根目录新建三个环境变量文件

分别输入不同的地址，
比如dev就写 dev的api地址、test就写test的api地址

# // .env NODE_ENV = "development" BASE_URL = "https://easy-mock.com/mock/5c4c50b9888ef15de01bec2c/api"

接着在根目录中新建一个 vue.config.js

// vue.config.js module.exports = { chainWebpack: config => { // 这里是对环境的配置，不同环境对应不同的BASE_URL，以便axios的请求地址不同 config.plugin('define').tap(args => { args[0]['process.env'].BASE_URL = JSON.stringify(process.env.BASE_URL) return args }) } }

然后在src目录下新建一个 api文件夹，创建一个 index.js用来配置 axios的配置信息

// src/api/index.js import axios from 'axios' import router from '../router' import { Message } from 'element-ui' const service = axios.create({ // 设置超时时间 timeout: 60000, baseURL: process.env.BASE_URL }) // post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置 // 即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8 service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'' export default service 5.2 请求响应封装 import axios from 'axios' import router from '../router' import { Message } from 'element-ui' const service = axios.create({ // 设置超时时间 timeout: 60000, baseURL: process.env.BASE_URL }) /** * 请求前拦截 * 用于处理需要在请求前的操作 */ service.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers['Authorization'] = token } return config }, (error) => { return Promise.reject(error) }) /** * 请求响应拦截 * 用于处理需要在请求返回后的操作 */ service.interceptors.response.use(response => { const responseCode = response.status // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据 // 否则的话抛出错误 if (responseCode === 200) { return Promise.resolve(response) } else { return Promise.reject(response) } }, error => { // 服务器返回不是 2 开头的情况，会进入这个回调 // 可以根据后端返回的状态码进行不同的操作 const responseCode = error.response.status switch (responseCode) { // 401：未登录 case 401: // 跳转登录页 router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) break // 403: token过期 case 403: // 弹出错误信息 Message({ type: 'error', message: '登录信息过期，请重新登录' }) // 清除token localStorage.removeItem('token') // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 setTimeout(() => { router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) }, 1000) break // 404请求不存在 case 404: Message({ message: '网络请求不存在', type: 'error' }) break // 其他错误，直接抛出错误提示 default: Message({ message: error.response.data.message, type: 'error' }) } return Promise.reject(error) }) export default service

Message 方法是 element-ui 提供的一个消息提示组件、大家可以根据自己的消息提示组件进行替换

5.3 断网处理