vue - vue.config.js中devServer配置

た入场券 2021-09-29 03:48 538阅读 0赞

### 前言 ###

这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的`baseUrl`要写为`''`，即空字符串

### 只有一个接口ip端口时 ###

devServer: {
        open: false,
        // 跨域
        proxy: {
          '/nuojinadm/': {
            target: 'http://192.168.0.11/',
            changeOrigin: true
          }
        }
      }

2、设置axios中的baseUrl 与proxy端口一致

baseUrl: {
        dev: '/nuojinadm/',
        pro: '/nuojinadm/'
     }

### 当有多个ip端口的接口时 ###

devServer: {
        open: false,
        port: 8801, // 自定义修改8080端口
        // 代理跨域
        proxy: {
          '/proxy1/adm/': {
            target: 'http://192.168.0.xx:xxxx/',
            changeOrigin: true
          },
          '/proxy2/adm/': {
            target: 'http://192.168.0.xx:xxxx/',
            changeOrigin: true
          },
          '/httpsProxy3/config/': {
            target: 'https://xx.xx.com',
            secure: false, // https协议才设置
            changeOrigin: true
          }
        }
      }

2、设置axios中的baseUrl 设置为空

baseUrl: {
        dev: '/',
        pro: '/'
      }

3、在每个request（axios）页面中

const proxyxxx= '/xxx/xxx'
    
    export const getBannerList = params => {
      return axios.request({
        url: `${proxyxxx}/banner/v1/banner/${params.pageSize}/${params.pageNum}`,
        params,
        method: 'get'
      })
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，538人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue.config.js文件devServer字段的常用选项

在 Vue CLI 生成的 `vue.config.js` 文件中，`devServer` 字段用于配置开发服务器的选项。下面是其中几个常用选项的说明： 1. `host`

╰+哭是因爲堅強的太久メ/ 2024年02月18日 13:47/ 0 赞/ 31 阅读

相关 Webpack--devServer的常用配置

原文网址：[Webpack--devServer的常用配置\_IT利刃出鞘的博客-CSDN博客][Webpack--devServer_IT_-CSDN] 简介说明

ゞ浴缸里的玫瑰/ 2023年09月29日 17:06/ 0 赞/ 50 阅读

相关 webpack配置：devServer中的before方法的作用

新版本的vue中已将dev-server.js与webpack.dev.conf.js合并，所以在dev-server.js的配置可以写在webpack.dev.conf.j

我不是女神ヾ/ 2023年03月13日 13:21/ 0 赞/ 28 阅读

相关 webpack 手摸手学习系列之配置 devServer 和配置开发环境

一、webpack 配置 devServer 1. 创建空文件夹，通过 `npm init` 命令初始化 `package.json` 文件，通过 `npm insta

「爱情、让人受尽委屈。」/ 2023年02月12日 11:20/ 0 赞/ 38 阅读

相关 webpack 配置devServer 服务器

webpack 配置devServer 服务器 / loader: 1. 下载 2. 使用（配置） plugins：1. 下载 2. 引入

迷南。/ 2023年01月09日 12:35/ 0 赞/ 212 阅读

相关 webpack配置devServer配置https代理与证书

浏览器如果需要开发某些特定功能，需要`https`浏览器才会给予功能权限，则开发时我们需要在https环境下面是配置一个`webpack` `devServer`的`h

╰+攻爆jí腚メ/ 2023年01月07日 12:27/ 0 赞/ 214 阅读

相关 Vue devServer.proxy代理配置详解

const proxy = require('http-proxy-middleware'); module.exports = {

￡神魔★判官ぃ/ 2022年12月17日 01:24/ 0 赞/ 327 阅读

相关 devServer之proxy跨域

配置 devServer:{ contentBase:'./', proxy:{

矫情吗；*/ 2022年01月22日 04:03/ 0 赞/ 293 阅读

相关 webpack实例解析三（devServer）

webpack的devServer，给我们提供了一个本地的node服务器，用于开发模式下调试我们的应用. webpack-dev-server模块启动之后把我们的代码打包到n

港控/mmm°/ 2021年10月01日 01:12/ 0 赞/ 486 阅读

相关 vue - vue.config.js中devServer配置

前言这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的`baseUrl`要写为`''`，即空字符串只有一个接口ip端口

た入场券/ 2021年09月29日 03:48/ 0 赞/ 539 阅读