关于vue项目proxyTable配置和部署服务器的问题

目录
  • proxyTable配置和部署服务器
    • 1.在config中的index
    • 2.在调取接口的方法中
  • proxyTable代理参数含义

proxyTable配置和部署服务器

在本地创建node.js服务器，前端访问本地接口需要设置跨域

1.在config中的index

找到proxyTable，完成以下设置

proxyTable: {
‘/api': {
target: ‘http://localhost:8808/', //目标接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
‘^/api': ‘/' //重写接口
}
}
},

2.在调取接口的方法中

下面是node.js服务端的

切记：：：！！！配置完成后一定要重启前端项目，要不然会报错

proxyTable代理参数含义

vue项目里，找到index.js文件，再proxyTable 写入相应的代理即可，网上有些说自己新建一个vue.config.js文件，项目启动时会自己导入，也是可以的

proxyTable: {
      // 这里配置 '/api' 就等价于 target , 你在链接里访问 /api === http://localhost:54321
      '/api': {//该api可以自定义，比如写成abc，但同时下方的/^api也要改成/^abc了
        target: 'http://localhost:54321/', // 服务器的接口地址，即你要访问的真实地址,http或者https都可以 //        http://localhost:54321/json.data.json,
        changeOrigin: true, // 是否是跨域请求?肯定是啊,不跨域就没有必要配置这个proxyTable了.
          logLevel: 'debug',//调试时，可以输出代理后的真实地址是什么，上线时注释掉即可
        pathRewirte: {
          // 这里是追加链接,比如真是接口里包含了 /api,就需要这样配置.以下两种方式任写一种即可
 
            //方式一，留空，不写
             '/^api': '', //代表你在axios里的请求'/api/info' = http://localhost:54321/info
 
            //方式二，重写
            '/^api': 'api/', //代表你在axios里的请求'/api/info' = http://localhost:54321/api/info
 
                 
        }
      }
     },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue之proxyTable代理超全面配置流程

    vue之proxyTable代理超全面配置流程

    目录 前言 介绍 配置分离 1. config.dev.js 2. proxyTableHandler.js 效果如下 前言 用了vue有一年多了,从最初的摸着石头过河到现在已经能熟练的使用vue开发项目,学到了许多,特别是vue的代理配置让我眼前一亮,甚是喜欢,故将自己对proxyTable代理配置整理出来,供致力于的开源的同辈浏览,望大家手下留情,哈哈_. 介绍 vue的proxyTable是用于开发阶段配置跨域的工具,可以同时配置多个后台服务器跨越请求接口,其真正依赖的npm包是http-

  • vue中的proxyTable反向代理(亲测有用)

    vue中的proxyTable反向代理(亲测有用)

    目录 proxyTable反向代理 1.打开vue项目->config->index.js 2.打开一个vue页面 3.npm run dev 反向代理的实现原理 实现原理 程序运行过程 proxyTable反向代理 proxyTable的设置网上有的是,以前也没管过,但新公司的项目需要用到,所以就彻底研究一下,结果绕了好大的弯子! 注:每次设置完proxyTable,请一定要重启,刷新不好使   npm run dev! 开始前,请劳记上面操作,我就在这绕了很大的弯,一直以为页面刷新就行了,

  • vue服务器代理proxyTable配置如何解决跨域

    vue服务器代理proxyTable配置如何解决跨域

    目录 服务器代理proxyTable配置解决跨域 1.Proxy代理作用 2 .常见情况 3.应用方式 4.具体配置实例 5.配置思路 Vue.proxyTable是什么? 为什么会有proxyTable存在? 配置proxyTable 服务器代理proxyTable配置解决跨域 1.Proxy代理作用 proxy代理作用:前端服务器代理的作用是,告诉服务器任何未知请求(没有匹配到静态文件的请求),代理到一个另一个地址,从而解决跨域的问题. 2 .常见情况 前端在向后端进行资源请求的时候,后端若

  • vue proxytable代理根路径的同时增加其他代理方式

    目录 proxytable代理根路径的同时增加其他代理 使用proxytable的路径问题 代码例子 proxytable的默认pathRewrite为 proxytable代理根路径的同时增加其他代理 Vue 项目有一个需求,需要对根路径 ‘/’ 进行代理,但同时还存在其余特例路径的访问需求 ‘/py’,例: 代理 /* 到 localhost:5000 代理 /py/*到 localhost:5001 此时,需要将特例路径的代理写在根路径的前面,否则会被根路径的代理覆盖,无法成功进行代理:

  • 关于vue项目proxyTable配置和部署服务器的问题

    关于vue项目proxyTable配置和部署服务器的问题

    目录 proxyTable配置和部署服务器 1.在config中的index 2.在调取接口的方法中 proxyTable代理参数含义 proxyTable配置和部署服务器 在本地创建node.js服务器,前端访问本地接口需要设置跨域 1.在config中的index 找到proxyTable,完成以下设置 proxyTable: { '/api': { target: 'http://localhost:8808/', //目标接口域名 changeOrigin: true, //是否跨域 p

  • vue项目proxyTable配置小结

    目录 前言 如何配置proxyTable 关于proxyTable的原理 前言 proxyTable是一个用于Vue.js应用程序的配置选项,它允许您在开发过程中代理后端API请求.这一功能的作用是解决由于浏览器的同源策略所限制而导致的跨域请求问题.当前端应用程序部署在一个Web服务器上并向不同的后端API发送请求时,这个功能就变得尤为重要. 在Vue.js应用程序中使用proxyTable的主要优点是能够简化配置,方便地进行本地开发和调试.在开发过程中,可以将所有的API请求都代理到本地的开发

  • Nginx部署vue项目和配置代理的问题解析

    Nginx部署vue项目和配置代理的问题解析

    1.nginx安装和启动 # 安装nginx sudo apt-get install nginx # 启动 sudo service nginx start 验证安装 # 安装完成后使用nginx -v检查,如果输出nginx的版本信息表明安装成功 nginx -v # 如果输出类似于这样的版本号等,证明安装完成 nginx version: nginx/1.14.0 (Ubuntu) 2.修改nginx配置文件,部署项目 查看nginx的配置,linux系统下的配置文件通常会存放在/etc目

  • 详解本地Vue项目请求本地Node.js服务器的配置方法

    详解本地Vue项目请求本地Node.js服务器的配置方法

    目录 1.使用vue-cli脚手架搭建vue项目 2.使用koa搭建node后端 3.Vue项目中添加后端请求 参考资料: 前言:本文只针对自己需要本地模拟接口于是搭建一个本地node服务器供自己测试使用,仅作自己从头到尾搭建项目的记录 1.使用vue-cli脚手架搭建vue项目 1.在桌面运行 cmd,使用命令vue create demo创建一个vue项目demo,插件依赖等使用默认配置2.项目创建成功之后,使用命令 cd demo,进入 demo 文件夹,然后使用命令 npm run se

  • Vue项目全局配置微信分享思路详解

    这个项目为移动端项目,主要用于接入公众号服务.项目采用两种登录方式,微信授权登录以及账号密码登录.对于移动端项目而言,为了便于项目扩展以及提供开发热更新速度,项目分为不同的模块,每个模块是一个单页面应用.页面分为两种,一种是需要用户登录之后才能浏览,另一种是用户无需登录即可浏览.无论哪一种,均配置微信分享. 使用的技术 1.使用vue作为框架 2.使用vux作为UI组件库 全局配置微信分享思路 1.区分一般和特殊,一般情况,全局配置默认分享文案:特殊情况分两种,一种是分享内容不需要异步获取,则在

  • Vue项目中配置pug解析支持

    Vue 的用法没有变化: <template lang="pug"> transition(name="sider") div.hello h3 {{msg}} p(:style="{color:'#000'}", :htmlData="msg") p label button(@click="clickMe") clickTest </template> 要注意的一点是: 标签后面

  • 使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

    在终端中运行以下命令: vue create xxx // xxx为项目名称,例如 vue-project 然后,系统会提示我们选择默认预设或手动选择功能.使用向下箭头键,我们手动选择功能,然后按Enter键. 然后,我们将看到一系列功能选项.使用向下箭头键,我们将向下移动并使用空格键选择需要的功能,然后按回车键. Linter / Formatter 就是代码风格. 我们将使用 ESLint + Prettier 我们将在保存时添加Lint的附加功能. 我们将选择单独的配置文件. 我们可以选择

  • 浅谈vue项目如何打包扔向服务器

    浅谈vue项目如何打包扔向服务器

    当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中.我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上. 如果是 vue-cli (非 simple 脚手架),这篇文章可能有点帮助.地址链接:vue-cli 如何打包上线 先来描述一下期间遇到的问题有哪些: 1.打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提示 404. 2.打包好的静态资源均是绝对

  • 在vue项目中配置你自己的启动命令和打包命令方式

    在vue项目中配置你自己的启动命令和打包命令方式

    目录 配置自己的启动命令和打包命令 准备 vue项目启动命令的配置与切换 vue启动命令的切换npm run dev和npm run serve配置 修改方法 配置自己的启动命令和打包命令 在开发中,通常会需要和后台做一些开发调试, 本地开发, 和线上观测 这时 如何用一套代码 加上 几个命令来轻松的做到这些? 准备 首先除vue项目外 我们还需要安装几个额外的包来帮助我们 这只是在 vue-cli2 中的配置 当然 vue-cli3 也可以通过如下方法来配置一些环境 npm i cross-e

  • Vue项目全局配置页面缓存之按需读取缓存的实现详解

    写在前面 一个web app的实际使用场景中,有一些情景的交互要求,是记录用户的浏览状态的.最常见的就是在列表页进入详情页之后,再返回到列表页,用户希望返回到进入详情页之前的状态继续操作.但是有些使用场景,用户又是希望能够获取最新的数据,例如同级列表页之间切换的时候. 如此,针对上述两种使用场景,需要实现按需读取页面缓存.由于SPA应用的路由逻辑也是在前端实现的,因此可以在前端对路由的逻辑进行设置以实现所需效果. 使用技术 Vue.js作为主要框架 Vue-router作为前端路由管理器 Vue

随机推荐