vue内网穿透配置

最新推荐文章于 2024-07-25 16:11:15 发布

Rick And You

最新推荐文章于 2024-07-25 16:11:15 发布

阅读量1.8k

点赞数

分类专栏：个人日志文章标签： vue

本文链接：https://blog.csdn.net/yangzhijie0608/article/details/124197941

版权

本文介绍了如何配置Vue项目的内网穿透，首先通过ngrok获取隧道ID并启动sunny ngrok工具，然后在不同版本的Vue项目中（vue2和vue3）进行配置。对于vue3，在vue.config.js文件中设置相关参数。如果遇到启动报错，可以参考指定的csdn文章进行排查。

摘要由CSDN通过智能技术生成

1,进入https://www.ngrok.cc/login.html获取隧道ID，启动sunny bat工具（内网穿透工具sunny ngrok）

2.在webpack.dev.conf.js文件下配置相关参数。

vue2:config文件夹下的index.js文件下配置

module.exports = {
   
  devServer: {
   
    port: 3000, // 端口
    disableHostCheck: true, // 绕过主机检查
  },
  // lintOnSave: false // 取消 eslint 验证

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Rick And You

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

使用natapp实现内网穿透详细教程

https://hibernation0814.github.io/

05-24

4319

当我们的项目是部署在本地的时候，如何让其他用户（不在同一个局域网之下）来进行调用呢？这时我们就可以使用内网穿透将自己的IP通过映射成相应的地址，然后再通过映射后的地址来进行访问本地的项目。

disableHostCheck: true 报错

热门推荐

lx233

03-17

1万+

直接在package.json 里加命令 "serve": "vue-cli-service serve --disableHostCheck=true ",

参与评论您还未登录，请先登录后发表或查看评论

vue3 访问报Invalid Host header

xioxiwang的博客

07-25

177

在webpack 5 中disableHostCheck应该被遗弃了。查看文档了解到需将 disableHostCheck:true。重新运行：npm run serve 就可以打开了。报错Invalid Host header。重新配置vue.config.js。

vite创建的vue项目公众号本地开发内网穿透

web_gutianle的博客

12-09

427

ngrok内网穿透

vue 431错误

暗夜蝶梦

11-08

585

“%_prog%” “–max-http-header-size=1000000” “%dp0%…@vue\cli-service\bin\vue-cli-service.js”%*

vue项目启动后实现localhost和局域网内ip访问页面

2301_78187511的博客

07-08

682

【代码】vue项目启动后实现localhost和局域网内ip访问页面。

VUE项目的内网穿透

qq_42661904的博客

03-18

3628

注意点：vue项目在运行时会先进行主机检测，如果检测到非本机会拒绝访问，所以在进行内网穿透前得先设置 vue.config.js文件中配置忽略主机检测：有两种常用软件可以做内网穿透： 2.1：https://natapp.cn/ NATAPP做内网穿透: 2.1.1：基本配置：https://natapp.cn/article/natapp_newbie 2.1.2：第八步详解：在nat...

springboot+vue项目部署内网穿透

weixin_44172800的博客

05-28

1857

springboot+vue项目部署我采用的是合并部署的方式预先准备服务器准备好项目的数据库 java环境 vue打包静态文件 1.进入vue项目的根目录 2.输入cmd 3.输入 npm run build 4.将dist文件里面的静态资源复制导入静态资源到后端在资源目录下创建static文件夹，将刚才复制的静态资源粘贴进去打项目jar包按顺序执行下面的步骤执行后在target中就可以看到打好的jar包然后将该jar包发送发到服务器上，然后再改jar包的文件夹上进入cm

基于Netty实现的内网穿透&反向代理的工具 (支持TCP上层协议和HTTP的穿透式反向代理).zip

05-31

基于Netty实现的内网穿透&反向代理的工具 (支持TCP上层协议和HTTP的穿透式反向代理).zip

基于solon、netty的NeutrinoProxy设计源码：内网穿透神器

最新发布

09-27

NeutrinoProxy（中微子代理）是一款基于solon和netty框架的内网穿透解决方案，其源码设计文件共计913个，包括299个Java文件、101个Vue文件、90个JavaScript文件、168个PNG图片文件等，覆盖Java、Vue、JavaScript等...

vue 本地服务不能被外部IP访问的完美解决方法

12-09

解决 webpack-dev-serveri 启动后通过外部访问报错 invalid host header 修改 config/index.js 的 host 属性为 ‘0.0.0.0′ { // ..., host: '0.0.0.0', port: 8080, // ... } 修改 build/webpack.dev.conf.js 的 devServer 配置增加 disableHostCheck = true devServer: { clientLogLevel: 'warning', historyApiFallback: true, hot: true,

vue-element-admin请求接口时报错：431 Request Header Fields Too Large

把项目开发中遇到的问题记录下来

01-02

1586

vue-element-admin请求接口时报错：431 Request Header Fields Too Large

vue.config.js配置代理跨域。

weixin_46409887的博客

02-21

3891

module.exports = { // pabulicPath:process.env.NODE_ENV === 'production' ? '' : '', devServer:{ host:'0.0.0.0', port:'8080', // https:false, open:true, //以上的ip和端口是我们本机的;下面为需要跨域的 proxy:{ //配置跨域

【disableHostCheck】本地项目遇到图片跨域怎么解决？

qq_39404437的博客

12-16

2540

本地vue项目遇到图片跨域怎么解决？常规的方法我就不说了，啥配置图片服务器设置，nginx代理都不说了，下面来说个重点disableHostCheck：本地项目代理到指定域名下。

Vue 项目 invalid host header 问题配置 disableHostCheck:true报错

qq_35895270的博客

02-16

377

Vue 项目 invalid host header 问题配置 disableHostCheck:true报错

系统配置vue.config.js(通用)和vue3中的vite.config.js的通用配置

luofei_create的博客

05-31

1万+

vue.config.js的配置 module.exports = { devServer: { host: '', hot: true, port: 8086, disableHostCheck: true,//新版的webpack-dev-server出于安全考虑，默认检查hostname， //如果hostname不是配置内的，将中断访问。 https: false, open: true, // 是

内网穿透 vue出现 Invalid Host header 错误提示解决办法

时不我待

02-27

910

最近发现新浪的SAE可以支持创建NODE环境应用，于是想将本地的VUE项目部署上去体验一下效果，结果是折腾了一上午，遇到了各种环境问题，解决了各种插件版本问题，终于可以启动服务器了，最后打开页面却提示 Invalid Host header。又是一通百度，最后找到了如下的解决办法，以下内容是原文照搬的，最后有原文地址。

vue axios 跨域配置

孔的博客

12-30

419

devServer: { disableHostCheck: true, host:'http://127.0.0.1',// 前端地址 port:'8020', proxy: { '/api':{ target:'http://127.0.0.1:8080',// 后端地址 changeOrigin:true, pathRe

本地内网穿透vue2 Invalid Host header

05-02

这个错误通常是由于使用了反向代理或负载均衡器等中间件，导致请求的 Host 头与实际的主机名不一致而引起的。解决这个问题需要修改 Vue.js 项目的配置。你可以在 `config/index.js` 文件中添加一行配置： ```js dev: { // ... disableHostCheck: true }, ``` 这样就可以关闭 Vue.js 开发服务器对 Host 头的检查，从而解决该问题。请注意，这样可能会存在一定的安全风险，因此请酌情使用。如果你使用的是 Vue CLI 3.x，可以在 `vue.config.js` 文件中添加以下配置： ```js module.exports = { devServer: { disableHostCheck: true } } ``` 这样也可以达到同样的效果。