vue项目部署到Gitee Pages,接口出现403处理

使用vuecli创建项目之后，目录大概如下

 接口需要安装axios

npm i axios -S 
// or
cnpm i axios -S

 还有安装qs

npm i qs -S 
// or
cnpm i qs -S

package.json文件：

{
  "name": "amazon",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^0.26.1",
    "element-ui": "^2.15.6",
    "qs": "^6.11.0",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-template-compiler": "^2.6.14"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

在src目录下新建2个文件夹，api、utils。然后如果没有vue.config.js这个文件，就自己创建一个

新建文件夹之后目录如下：

在api文件夹里面创建一个index.js，

在utils文件夹里面创建2个文件，分别是base.js、http.js

api文件夹里面的index.js主要是放接口，参考如下（包含get、post请求）：

import axios from '../utils/http.js'
import QS from 'qs'
import base from '../utils/base.js'

// /**
//  * post方法，对应post请求
//  * @desc注册请求
//  * @param {String} url [请求的url地址]
//  * @param {Object} params [请求时携带的参数]
//  */
//登录
export function login(data) {
    return axios({
        url: `${base.url}/users/login`,
        method: 'post',
        data: QS.stringify(data)
    })
}

// 获取菜单
export function cd(data) {
    return axios({
        url: `${base.url}/cd/cd`,
        method: 'get',
        data: QS.stringify(data)
    })
}

base.js     请求接口域名

//请求接口域名统一管理
const base = {
    url:'https://你的接口域名/api',
    //比如你的登录接口是https://www.website.com/index.php/api/login
    //那么你的url应该就是https://www.website.com/index.php/api
    //然后接口处理去api里面添加   /login  接口
}
export default base

 http.js     封装axios

import axios from 'axios'

import router from '../router/index.js'



// axios.interceptors.request.use(config => {
//   console.log(config)
//   config.headers.Authorization = window.localStorage.getItem('token');
//   return config;
// })
// 请求拦截
axios.interceptors.request.use(
    (confing) => {
        
        //设置请求头
        if (localStorage.getItem('token')) {

            // 每次除了登录的时候其他情况下发起请求的时候都携带token  -  因为其他接口
            confing.headers['token'] = localStorage.getItem('token');
        }
        // console.log(confing);
        return confing
    },
    (error) => {
        return Promise.reject(error)
    }
)

//响应拦截

axios.interceptors.response.use(
    (response) => {
        // console.log(response);
        //401代码
        // if (response.data.code === 401) {
        //     console.log('登录过期了');
        //     // localStorage.removeItem('token');
        //     // localStorage.removeItem('subject_name');
        //     localStorage.clear();
        //     Toast(response.data.msg);
        //     router.push('/')
        // }

        //466代码
        if (response.data.code === 466) {

            console.log('登录过期了');
            // alert('登录过期');
            // localStorage.removeItem('token');
            // localStorage.removeItem('subject_name');
            localStorage.clear();
            // Toast(response.data.msg);
            router.push('/login')
        }

        return response
    },
    (error) => {
      

        // 获取状态码
        const { status } = error.response
        
        //401之前的代码
        // if (status === 401) {
        //     // Message.error('请重新登录')
        //     Toast(error.response.msg);
        //         //清楚token
        //     // localStorage.removeItem('token')
        //         //跳转到登录页面
        //     // router.push('/')
        // }

        //466的代码
        if (status === 466) {
            // Message.error('请重新登录')
            Toast(error.response.msg);
                //清楚token
            // localStorage.removeItem('token')
                //跳转到登录页面
            // router.push('/')
        }
        return Promise.reject(error)
    }
)
export default axios

接下来设置vue.config.js（项目没有就自己创建）

vue.config.js里面设置部署gitee仓库名

//vue-background是我的仓库名    切换成你自己就行

const BASE_URL = process.env.NODE_ENV === 'production' ? "/schoolwork/" : '/';

module.exports = {
    publicPath: BASE_URL,
}

vue.config.js设置好就进行打包,

npm run build

部署到gitee pages上就能正常使用了。

因为我只是写了个登录页面，没有注册页面，就单独调用下登录接口来测试，网址在下行。（我在数据库放了个账号名：admin     密码:123456  供测试）

在线测试网址：amazon (gitee.io)

还要注意你的网址是否是https还是http，建议尽量和gitee使用相同的，gitee用的https，那么接口尽量也是https的，减少出错的可能。

注：因为是vue项目部署到gitee,gitee域名请求接口不同所以需要进行接口封装。如果是有自己的服务器，放自己网站上，可直接用axios部署就行，就可跳过api、utils这2个文件夹的操作