关于登录时的路径问题

 vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,

  devServer:{
    // proxy:{
    //   '/api':{//表示拦截以/api开头的请求路径
    //     target:'https://api.apiopen.top/api',
    //     // target:'https://mock.mengxuegu.com/mock/63368eebfc3600383bca2053/blog-admin',
    //     changOrigin: true,//是否开启跨域
    //     pathRewrite:{
    //       '^/api':'' //重写api,把api变成空字符,因为我们真正请求的路径是没有api的
    //     }
    //   }
    // }
    proxy: { // 开发环境代理配置
      // '/dev-api': {
      [process.env.VUE_APP_BASE_API] :{
          // 目标服务器地址,代理访问 http://localhost:8001
          target: process.env.VUE_APP_SERVICE_URL,
          // target:"http://localhost:8888/",
          changeOrigin: true, // 开启代理服务器,
          pathRewrite: {
              // /dev-api/db.json 最终会发送 http://localhost:8001/db.json
              // 将 请求地址前缀 /dev-api 替换为 空的,
              // '^/dev-api': '',
              [ '^' + process.env.VUE_APP_BASE_API]: ''
          }
      }
  }
  }

})

.env.development

# 只有以 VUE_APP_ 开头的变量会被 webpack 静态嵌入到项目中进行使用 process.env.VUE_APP_xxxxxx


# 目标服务接口地址,这个地址是按照你自已环境来的, 添加 或者更改配置后,需要重启服务
VUE_APP_SERVICE_URL = 'https://api.apiopen.top/api'

# 开发环境的前缀
VUE_APP_BASE_API = '/dev-api'

在request.js

//用来做拦截的
import axios from 'axios';
const instance = axios.create({
    // baseURL: 'https://api.apiopen.top/api',
    // baseURL:'api',//把原来的项目地址,改成api,解决跨域问题
    baseURL: process.env.VUE_APP_BASE_API, 
    timeout: 5000,

});

猜你喜欢

转载自blog.csdn.net/weixin_43972428/article/details/127548320
今日推荐