feat: axios

src/App.vue

@@ -19,7 +19,7 @@ export default {
     },
     methods: {
         async request() {
-            let result = await this.$http.get('/webapi/home/banner?type=1&category=18')
+            let result = await this.$http.get('/home/banner?type=1&category=18')
             console.log('result:', result)
         }
     }

src/config/proxy.config.js

+module.exports = {
+    proxyapi: {
+        target: 'http://127.0.0.1:3008',
+        changeOrigin: true,
+        pathRewrite: { '^/proxyapi': '/' }
+    },
+    webapi: {
+        target: 'https://test2.laihua.com/',
+        changeOrigin: true,
+        pathRewrite: { '^/webapi': '/' }
+    },
+    mockapi16: {
+        target: 'http://y-api.laihua.com/mock/16/',
+        changeOrigin: true,
+        pathRewrite: { '^/mockapi16': '/' }
+    },
+    appapi: {
+        target: 'http://test.api.laihua.com/',
+        changeOrigin: true,
+        pathRewrite: { '^/appapi': '/' }
+    },
+    collectapi: {
+        target: 'https://collection.laihua.com/',
+        changeOrigin: true,
+        pathRewrite: { '^/collectapi': '/' }
+    },
+    weiboavatar: {
+        target: 'https://tva4.sinaimg.cn/',
+        changeOrigin: true,
+        pathRewrite: { '^/weiboavatar': '/' }
+    }
+}

src/main.js

@@ -13,7 +13,7 @@ import globalComponents from '@/components/global/index.js'
 import filters from '@/filters/index.js'
 import directives from '@/directives/index.js'
 import utils from '@/utils/index.js'
-console.log('axios:', axios)
+console.log('process.env:', process.env)
 // 全局注册layout组件
 Vue.use(layoutComponents)
 // 注册自定义全局组件
@@ -26,15 +26,12 @@ Object.keys(directives).forEach((key) => Vue.directive(key, directives[key]))
 Vue.use(VueBus)
 Vue.use(VModal)
 
-import baseURL from '../config/baseUrl.js'
-console.log('baseURL:', baseURL)
 Vue.config.productionTip = false
 Vue.prototype.$http = axios
 Vue.prototype.$mt = moment
 Vue.prototype.$ = utils
 new Vue({
     router,
-
     store,
     render: (h) => h(App)
 }).$mount('#app')

src/plugins/axios.js

 import axios from 'axios'
-console.log('axios:', axios)
+// import store from '@/store/index'
+// import router from '@/router/index.js'
 
 /**
  * 默认配置
  */
-axios.defaults.baseURL = ''
+console.log('axios-process.env:', process.env)
+axios.defaults.baseURL = process.env.VUE_APP_BASEURL
+axios.defaults.timeout = 10000
 axios.defaults.headers.common['a-laihua-defined-key'] = 'a customized value'
 
 // 请求拦截
@@ -20,15 +23,78 @@ axios.interceptors.request.use(
     }
 )
 
+// 处理响应错误码
+const checkStatus = (response) => {
+    const status = response.status
+
+    // 如果http响应状态码response.status正常，则直接返回数据
+    if ((status >= 200 && status < 300) || status === 304) {
+        return response.data
+    } else {
+        // 判断后端返回的code
+        let errMsg = ''
+        const code = parseInt(response.data && response.data.code)
+        console.log('code:', code)
+        switch (code) {
+            case 400:
+                break
+            case 4001:
+                if (process.server) return
+                errMsg = '登录设备数量超出限制'
+                // store.commit('savehttpResult', { res: response.data })
+                break
+            case 403:
+                errMsg = '未登录'
+                // store.commit('changeLogin', {})
+                break
+            case 412:
+                errMsg = '未找到有效session'
+                break
+            case 408:
+                errMsg = '请求超时'
+                break
+            case 500:
+                errMsg = '服务器内部错误'
+                break
+            case 501:
+                errMsg = '服务未实现'
+                break
+            case 502:
+                errMsg = '网关错误'
+                break
+            case 503:
+                errMsg = '服务不可用'
+                break
+            case 504:
+                errMsg = '网关超时'
+                break
+            case 505:
+                errMsg = 'HTTP版本不受支持'
+                break
+            default:
+                // errMsg = err.response.data.msg
+                break
+        }
+        console.log('errMsg:', errMsg)
+        return {
+            code,
+            errMsg
+        }
+    }
+}
+
 // 响应拦截
 axios.interceptors.response.use(
-    (response) => {
-        // 对响应数据做点什么
-        return response
-    },
-    function(error) {
+    (response) => Promise.resolve(checkStatus(response)),
+    (err) => {
+        console.log('响应错误拦截err:', err)
         // 对响应错误做点什么
-        return Promise.reject(error)
+        if (axios.isCancel(err)) {
+            throw new axios.Cancel('cancel request')
+        } else {
+            console.log('网络请求失败，请重试:')
+        }
+        return Promise.reject(err)
     }
 )
 

src/plugins/axiosBackup.js

+import axios from 'axios'
+
+// let baseurl = require('../../static/js/config.js').default; // 引入接口地址
+
+const myHttp = {}
+
+myHttp.install = function(Vue) {
+    const http = axios.create({
+        // 使用create创建了一个实例对象
+        timeout: 1000 * 600, // 请求超时时间(毫秒)
+        withCredentials: true, // 是否携带cookie信息
+        headers: {
+            'Content-Type': 'application/json; charset=utf-8'
+        }
+        // baseURL: baseurl        // 请求的接口地址ip + 端口号
+    })
+
+    Vue.prototype.$http = http // 这样配置完就可以全局调用了
+}
+export default myHttp

src/store/global.js

 // 全局vuex信息
-// getter调用示例：this.$store.getters['test']
+// getter调用示例：this.$store.getters['authed']
 
 const state = {
-    _test: 1
+    _authed: false
 }
 
 const getters = {
-    test: (state) => state._test
+    authed: (state) => state._authed
 }
 
 const mutations = {}

src/views/home.vue

@@ -17,7 +17,8 @@ export default {
         return {}
     },
     created() {},
-    mounted() {}
+    mounted() {},
+    methods: {}
 }
 </script>
 

vue.config.js

-console.log('process.env.NODE_ENV1:', process.env.NODE_ENV)
+const proxyConf = require('./src/config/proxy.config.js')
+
+console.log('process.env.NODE_ENV1:', process.env)
 
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
 
@@ -12,14 +14,7 @@ module.exports = {
         port: 3020,
         https: false,
         hotOnly: false,
-        proxy: {
-            webapi: {
-                target: 'https://test2.laihua.com/',
-                ws: true,
-                changeOrigin: true,
-                pathRewrite: { '^/webapi': '/' }
-            }
-        }
+        proxy: proxyConf
     },
     chainWebpack: (config) => {
         config.when(process.env.NODE_ENV !== 'development', (config) => {
@@ -41,6 +36,7 @@ module.exports = {
                 return options
             })
     },
+    // 使用全局scss变量。但会导致打包变慢
     css: {
         loaderOptions: {
             sass: {