axios封装和config设置

QMPlusVuePage/.env.development

@@ -0,0 +1,2 @@
+ENV = 'development'
+VUE_APP_BASE_API = '/api'

QMPlusVuePage/.env.production

@@ -0,0 +1,2 @@
+ENV = 'production'
+VUE_APP_BASE_API = '/'

QMPlusVuePage/src/api/user.js

@@ -0,0 +1,13 @@
+import service from '@/utils/request'
+
+// @Summary 用户登录
+// @Produce  application/json
+// @Param data body {userName:"string",passWord:"string"}
+// @Router /base/login [post]
+export const login = (data) => {
+    service({
+        url: "/base/login",
+        method: 'post',
+        data: data
+    })
+}

QMPlusVuePage/src/store/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import VuexPersistence from 'vuex-persist'
 
-import { User } from "@/store/module/user"
+import { user } from "@/store/module/user"
 Vue.use(Vuex)
 
 
@@ -12,7 +12,7 @@ const vuexLocal = new VuexPersistence({
 })
 export const store = new Vuex.Store({
     modules: {
-        User
+        user
     },
     plugins: [vuexLocal.plugin]
 })

QMPlusVuePage/src/store/module/user.js

@@ -18,9 +18,9 @@ export const user = {
         }
     },
     actions: {
-        AsyncSetUserInfo({ commit }, loginInfo) {
+        // AsyncSetUserInfo({ commit }, loginInfo) {
 
-        }
+        // }
     },
     getters: {
         userName(state) {

QMPlusVuePage/src/utils/request.js

@@ -0,0 +1,56 @@
+import axios from 'axios'; // 引入axios
+import { Message } from 'element-ui';
+import { store } from '@/store/index'
+
+const service = axios.create({
+    baseURL: process.env.VUE_APP_BASE_API,
+    timeout: 5000
+})
+
+//http request 拦截器
+service.interceptors.request.use(
+    config => {
+        const token = store.getters['user/token']
+        config.data = JSON.stringify(config.data);
+        config.headers = {
+            'Content-Type': 'application/json',
+            'x-token': token
+        }
+        return config;
+    },
+    error => {
+        Message({
+            showClose: true,
+            message: error,
+            type: 'error'
+        })
+        return Promise.reject(error);
+    }
+);
+
+
+//http response 拦截器
+service.interceptors.response.use(
+    response => {
+        if (response.data.success) {
+            return response.data
+        } else {
+            Message({
+                showClose: true,
+                message: response.data.msg,
+                type: 'error'
+            })
+            return Promise.reject(response.data.msg)
+        }
+    },
+    error => {
+        Message({
+            showClose: true,
+            message: error,
+            type: 'error'
+        })
+        return Promise.reject(error)
+    }
+)
+
+export default service

QMPlusVuePage/src/view/login/login.vue

@@ -2,7 +2,7 @@
         <el-container class="login-box">
             <el-header>登录</el-header>
                 <el-main>输入框在这里
-                    <el-button>
+                    <el-button @click="login">
                         登录
                     </el-button>
                 </el-main>
@@ -11,15 +11,19 @@
 
 <script>
 import {mapState, mapGetters, mapActions , mapMutations} from 'vuex'
+import {login} from '@/api/user'
 export default {
     name:"Login",
     computed:{
-    ...mapGetters("User",["userName"]),
-    ...mapState("User",["userName"])
+    ...mapGetters("user",["userInfo"]),
+    ...mapState("user",["token"])
     },
     methods: {
-        ...mapActions("User",["AsyncSetUserName"]),
-        ...mapMutations("User",["setUserName"])
+        ...mapActions("user",["AsyncSetUserInfo"]),
+        ...mapMutations("user",["setUserInfo"]),
+        login(){
+            login({userName:"string1",passWord:"string"})
+        }
     },
 }
 </script>

QMPlusVuePage/vue.config.js

@@ -0,0 +1,105 @@
+'use strict'
+
+const path = require('path')
+
+function resolve(dir) {
+    return path.join(__dirname, dir)
+}
+module.exports = {
+    /**
+     * You will need to set publicPath if you plan to deploy your site under a sub path,
+     * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
+     * then publicPath should be set to "/bar/".
+     * In most cases please use '/' !!!
+     * Detail: https://cli.vuejs.org/config/#publicpath
+     */
+    publicPath: '/',
+    outputDir: 'dist',
+    assetsDir: 'static',
+    lintOnSave: process.env.NODE_ENV === 'development',
+    productionSourceMap: false,
+    devServer: {
+        port: 8080,
+        open: true,
+        overlay: {
+            warnings: false,
+            errors: true
+        },
+        proxy: {
+            // change xxx-api/login => mock/login
+            // detail: https://cli.vuejs.org/config/#devserver-proxy
+            [process.env.VUE_APP_BASE_API]: {
+                target: `http://127.0.0.1:8888`,
+                changeOrigin: true,
+                pathRewrite: {
+                    ['^' + process.env.VUE_APP_BASE_API]: ''
+                }
+            }
+        },
+    },
+    configureWebpack: {
+        // provide the app's title in webpack's name field, so that
+        // it can be accessed in index.html to inject the correct title.
+        resolve: {
+            alias: {
+                '@': resolve('src')
+            }
+        }
+    },
+    chainWebpack(config) {
+        // set preserveWhitespace
+        config.module
+            .rule('vue')
+            .use('vue-loader')
+            .loader('vue-loader')
+            .tap(options => {
+                options.compilerOptions.preserveWhitespace = true
+                return options
+            })
+            .end()
+        config
+        // https://webpack.js.org/configuration/devtool/#development
+            .when(process.env.NODE_ENV === 'development',
+            config => config.devtool('cheap-source-map')
+        )
+
+        config
+            .when(process.env.NODE_ENV !== 'development',
+                config => {
+                    config
+                        .plugin('ScriptExtHtmlWebpackPlugin')
+                        .after('html')
+                        .use('script-ext-html-webpack-plugin', [{
+                            // `runtime` must same as runtimeChunk name. default is `runtime`
+                            inline: /runtime\..*\.js$/
+                        }])
+                        .end()
+                    config
+                        .optimization.splitChunks({
+                            chunks: 'all',
+                            cacheGroups: {
+                                libs: {
+                                    name: 'chunk-libs',
+                                    test: /[\\/]node_modules[\\/]/,
+                                    priority: 10,
+                                    chunks: 'initial' // only package third parties that are initially dependent
+                                },
+                                elementUI: {
+                                    name: 'chunk-elementUI', // split elementUI into a single package
+                                    priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                                    test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+                                },
+                                commons: {
+                                    name: 'chunk-commons',
+                                    test: resolve('src/components'), // can customize your rules
+                                    minChunks: 3, //  minimum common number
+                                    priority: 5,
+                                    reuseExistingChunk: true
+                                }
+                            }
+                        })
+                    config.optimization.runtimeChunk('single')
+                }
+            )
+    }
+}