vue 处理开发和生产环境路径问题

原创已于 2022-11-10 16:27:18 修改 · 893 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2021-07-23 10:10:01 首次发布

VUE 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在Vue CLI项目中配置devServer代理以解决跨域问题，以及如何根据环境变量动态设置Axios的baseUrl。通过修改vue.config.js或index.js设置pathRewrite和proxyTable，实现对'/food'路径的重定向和API请求的代理。同时，展示了在api.js中封装实际请求的方法，确保开发和生产环境下的请求正确路由。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步. 修改vue ---config --- index.js 或者vue.config.js 中的内容

pathRewrite 重写是为了在请求时baseUrl是显示为loacalhost:8080/ 而不是loacalhost:8080/food

dev: {
 
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/food': {
        logLevel: `debug`,
        changeOrigin: true,
        pathRewrite: {
          '^/food': '/'
        },
        target: 'http://192.168.23.23:8080',
      },
    },
 
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true
...
}

//  cli3     vue.config.js
  devServer: {
    proxy:{
      "/api": {
          target: "http://www.xiongmaoyouxuan.com", // 需要代理的域名
           ws: false, // 是否启用websockets
          changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求							的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
          pathRewrite: {  //重写匹配的字段，如果不需要在请求路径上，重写为""
              "^/api": "/api"
          }
      },
   
  },
  }
 
 
 
 
  //cli2的放在config文件夹中的index.js  中
    dev: {
    proxyTable:{
      "/api": {
          target: "http://www.xiongmaoyouxuan.com", // 需要代理的域名
           ws: false, // 是否启用websockets
          changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求							的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
          pathRewrite: {  //重写请求路径上匹配到的字段，如果不需要在请求路径上，重写为""
              "^/api": "/api"，
              "demo.json": "index.json"
          }
      },
  },
  }

第二步. 在axios处理请求的baseUrl

判断当前环境是开发环境（development）还是生产环境（production），开发环境带上 ‘/food’ 走proxy代理，生产环境不走代理，为空

const baseUrl = (process.env.NODE_ENV === 'development') ? '/food' : ' '

const baseUrl = (process.env.NODE_ENV === 'development') ? '/food' : ''
const service = axios.create({
  baseURL: baseUrl, // api 的 base_url
  timeout: Config.timeout
})

设置统一的拦截器，注意import和export的内容

import axios from 'axios';
import Vue from 'vue';

// create an axios instance
const request = axios.create({
  baseURL: '/proxy-manage/rfloc', // url = base url + request url
  timeout: 60000 // request timeout
})

// http request 拦截器
request.interceptors.request.use(
  config => {
    // 在发送请求之前做什么, 判断token是否存在
    if (Vue.prototype.$csrftoken()) {
      // 注意：token前边有 'Bearer ' 的信息前缀,API接口需求，Bearer后边有空格,将token设置成请求头
      config.headers['CSRFTOKEN'] = Vue.prototype.$csrftoken();
    }
    return config;
  },
  err => {
    // do something with request error
    console.log(error)
    return Promise.reject(err);
  }
);

// http response 拦截器
request.interceptors.response.use(
  response => {
    if (response.data.errno === 999) {
      console.log("token过期");
    }
    return response;
  },
  error => {
    return Promise.reject(error);
  }
);

export { request };

第三步. 把实际请求封装在api.js里面

import { request } from '@/utils/request'


export function updatePlmn(id, data) {
  return request({
    method: 'post',
    url: '/plmn/update?plmn_id=' + id,
    data
  })
}

export function deletePlmn(params) {
  return request({
    method: 'post',
    url: '/plmn/delete',
    params
  })
}

第四部调用api

import {
  httpUpdateSection,
} from '../http/api'

handleSectionUpdate() {
      let params = {
        start_station_id: this.section_form.start_station_id,
        end_station_id: this.section_form.end_station_id,
        pre_section_id: this.section_form.pre_section_id,
        next_section_id: this.section_form.next_section_id,
        line_id: this.section_form.line_id,
      }
      httpUpdateSection(params, this.section_form.section_id).then((res) => {
        this.$message({
          message: '修改成功',
          type: 'success',
        })
        this.loadTableData()
        this.showUpdateSectionModel = false
      })
    },