【vue打包dish 直接访问后端接口问题】

http-server代理axios请求

http-server 简介

#http-server是一个简单的零配置命令行http服务器。它足够强大,足以用于生产用途,但它既简单又易于破解,可用于测试,本地开发和学习。使用场景除了可以用于实现前后端分离外,如果我们有些纯前端的一些html页面想要对外提供访问,http-server也是一种非常方便的工具。

安装http-server
先要确保安装了Node,然后再执行下列的安装命令。

#全局方式安装http-server
npm install http-server -g

配置环境变量
因为在Windows下安装,安装后的路径为C:\Users[用户名]\AppData\Roaming\npm,将这个目录配置到环境变量path中,那么才可以在CMD中直接使用http-server而无需使用全路径。

基本配置参数

p or --port :指定监听的端口

-P or --proxy:指定如果http-server处理不了的请求,将交个代理的地址的服务处理(正向代理)

启动方式
  普通的启动方式,不开启代理,那么所有的请求都会由http-server处理。

#直接启动,默认端口为:8080
http-server
#指定监听端口
http-server -p 1234

使用代理的方式启动,开启代理,这是我们需要的。http-server的代理是正向代理。

#代理方式启动
#下面的启动语句,表示:启动http-server监听1234端口,如果处理不了的请求那么就会将请求交给--proxy指定的服务处理。
http-server -p 1234 --proxy http://127.0.0.1:8080

启动http-server
  指定http-server -p 1234 --proxy http://127.0.0.1:8080启动http-server,特别注意执行http-server命令要在指定的前端文件所在的目录下执行,这样通过指定的端口才能找到指定的资源文件.例如下图,我测试的html页面的地址是在frontest目录下,CMD切换到指定目录下再执行命令.
在这里插入图片描述
至此 dist 直接访问后端接口就可以了没注意的是 vue.config.js中

module.exports = {
  publicPath: './',
  outputDir: 'dist',

publicPath 的 路径名称要是’./ ’

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值