vue - vue.config.js中devServer配置方式

前言

这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的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'
 })
}

以上这篇vue - vue.config.js中devServer配置方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue配置后台接口方式

    详解vue配置后台接口方式

    在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 proxyTable: { '/api': { target: 'http://127.0.0.1:8000', pathRewrite: { '^/api': '' } } }, 在工程目录下 > src > api > user.js - 接口写法 import axios from 'axios' export

  • 详解如何配置vue-cli3.0的vue.config.js

    本文介绍了如何配置vue-cli3.0的vue.config.js,分享给大家,具体如下: vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构,3 的设计更加抽象和简洁(此处后续可以详细介绍) vue

  • Vue-cli3项目配置Vue.config.js实战记录

    Vue-cli3项目配置Vue.config.js实战记录

    Vue-cli3 搭建的项目 界面想对之前较为简洁 之前的build和config文件夹不见了,那么应该如何配置 如webpack等的配那只需要在项目的根目录下vue.config.js 文件(是根目录,不是src目录 语法 module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build

  • vue-cli3中vue.config.js配置教程详解

    前言 vue-cli3推崇零配置,其图形化项目管理也很高大上. 但是vue-cli3推崇零配置的话,导致了跟之前vue-cli2的配置方式都不一样了. 别名设置,sourcemap控制,输入文件位置和输出文件位置和输出的方式,压缩js控制,打包webapck日志分析,externals忽略配置(外部引入),调试的端口配置,proxy接口配置等等的. 有时候还需要我们配置的,因为官方推荐的,并不适用于我们平时的开发所用的. 所以,我的vue.config.js配置是下面这样的.还有一个改hash的

  • vue - vue.config.js中devServer配置方式

    前言 这里写你调用接口的基础路径,来解决跨域,如果设置了代理,那你本地开发环境的axios的baseUrl要写为'',即空字符串 只有一个接口ip端口时 devServer: { open: false, // 跨域 proxy: { '/nuojinadm/': { target: 'http://192.168.0.11/', changeOrigin: true } } } 2.设置axios中的baseUrl 与proxy端口一致 baseUrl: { dev: '/nuojinadm/

  • vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决

    目录 proxy 配置确认.解析 原因 一 原因二 注意 详解 pathRewrite changeOrigin 总结 proxy 配置确认.解析 devServer: { https: true, // 开启https模式 // 配置服务器代理 proxy: { '/api': { // 匹配访问路径中含有 '/api' 的路径 target: 'http://localhost:3000/', // 测试地址.目标地址 changeOrigin: true, ws: true, // 是否开

  • vue proxyTable的跨域中pathRewrite配置方式

    目录 vue浏览器跨域问题和vue proxyTable跨域中pathRewrite配置 vue浏览器跨域问题 为什么会跨域 什么是同源策略 解决办法 pathRewrite 代理配置proxy下pathrewrite失效踩坑 vue浏览器跨域问题和vue proxyTable跨域中pathRewrite配置 vue浏览器跨域问题 当浏览器报如下错误时,则说明请求跨域了. localhost/:1 Failed to load http://www.thenewstep.cn/test/test

  • vue.config.js打包优化配置

    vue.config.js打包优化配置

    百度上的资料五花八门让人眼花缭乱,别急,这时候我替你亲身经历了,有需要的可以参考下,先上效果图,以免你们以为我吹牛逼,嘻嘻 优化方向 1.图片资源压缩 2.将 productionSourceMap 设为 false,map不进行生成 3.cdn配置(可选) 4.代码压缩 5.公共代码抽离(个人感觉没啥用) 未优化之前的 //感觉太大了 抬它 优化之后的 废话不多说了,上代码是重点 这些是必要的下载 /*cnpm install image-webpack-loader --save-dev c

  • Vue在 Nuxt.js 中重定向 404 页面的方法

    Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置. 要在页面之间使用路由,我们建议使用<nuxt-link> 标签. 正文 对我来说,Nuxt 是我所用过最好用的软件代码之一.它可以让我高效率地打造网站应用,无论这些应用是 SPA,还是 SSR,又或者是静态站点,这同时也是 JAM Stack 上面所提到的趋势. 顺便提一点,我们这个网站Vuedose 也是使用 Nuxt 所建立静态站点. 但是,绝大多数自己领悟的很有意思的使用技巧并没有被记载沉淀下来,

  • js中的循环方式及各种遍历的方法

    目录 for循环 while循环   do-while循环  循环的嵌套 遍历方法 for - in for - of for循环 1.for有三个表达式:①声明循环变量:②判断循环条件:③更新循环变量:三个表达式之间,用;分割,           for循环三个表达式都可以省略,但是两个";"缺一 不可.       2.for循环的执行特点:先判断再执行,与while相同      3.for循环三个表达式都可以有多部分组成,第二部分多个判断条件用&& ||连接,

  • vue.config.js中configureWebpack与chainWebpack区别及说明

    vue.config.js中configureWebpack与chainWebpack区别及说明

    目录 configureWebpack与chainWebpack区别 1.configureWebpack 2.chainWebpack vue-cli中chainWebpack和configureWebpack vue.config.js configureWebpack与chainWebpack区别 configureWebpack与chainWebpack的作用相同,唯一的区别就是他们修改webpack配置方式不同: https://cli.vuejs.org/zh/config/#con

  • laravel+vue组合的项目中引入ueditor方式(打包成组件形式)

    前言:最近写东西需要用到ueditor,并且需要是在vue组件中引入. (本博客默认你已经配置了laravel+vue的项目环境,如果还没有配置好的的小伙伴,可以看看我的另一篇文章,链接: https://www.jb51.net/article/122369.htm) 1.下载editor 这个直接去ueditor的官网下载其PHP版本的就可以了,没什么好说的 2.移到项目目录中(主要讲如何放置配置文件和静态资源文件) 打开下载好的ueditor目录,如果版本没有错也没出什么问题,应该就会看到

  • vuex状态持久化在vue和nuxt.js中的区别说明

    目录 vuex状态持久化在vue和nuxt.js的区别 Vue 使用 Nuxt vue的vuex的数据持久化 使用插件vuex-persistedstate对数据进行数据的持久化处理 plugins要是一个一维数组不然会解析错误 vuex状态持久化在vue和nuxt.js的区别 Vue 相信很多人对 vue 中的 vuex 状态持久化已经很熟悉了,使用 vuex-persistedstate 或者 vuex-persist 即可. 这里推荐使用前者,因为 vuex-persist 基于 ts ,

  • 关于vite.config.ts文件的配置方式

    目录 vite.config.ts文件的配置 1.alias配置别名 2.关于path的引入 vite项目在jenkins自动打包报错 2种解决方案 vite.config.ts文件的配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' // https://vitejs.dev/config/ export default defineConfig(

随机推荐