怎么让别人访问本地运行的vue项目

已于 2022-04-22 11:58:26 修改
阅读量9.7k 收藏 35
点赞数 5
分类专栏： 开发环境配置 文章标签： vue.js
于 2022-04-07 10:33:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/linx_i/article/details/124008030
版权
本文介绍了如何修改Vue项目的配置，将localhost更改为0.0.0.0，以便他人可以通过你的IP地址访问。步骤包括在config/index.js中更改host，使用cmd获取本地IP，关闭防火墙，并确保在同一网络环境下，其他用户可以输入你的IP:端口号来访问你的Vue应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、修改vue项目中config文件下的index.js
将host: "localhost" 改为 host: "0, 0, 0, 0"
请添加图片描述

2、window + R输入cmd调出控制台，在控制台中输入 ipconfig 找到电脑的IP地址
请添加图片描述
请添加图片描述
3、在控制面板中搜索防火墙并关闭防火墙
请添加图片描述
请添加图片描述
请添加图片描述

然后其他人就可以通过你的ip地址+端口号访问了。
本来你是localhost：8080这样的。现在改成192.1.2.3：8080就行了
注意：需要在同一网络环境下进行访问，例如，连同一个wifi，或者连接同一个路由器的宽带

记录：同一局网下，如何让他人访问我的本地vue项目
qq_43021088的博客
12-22 1922
1、win+R，输入cmd，回车，在黑框中输入ipconfig回车。复制ipv4的ip地址 2、修改config---index.js的host为步骤1中的ipv4的地址 3、修改package.json中的start，在末尾加上||--host0.0.0.0 4、重启项目，关闭防火墙。项目运行后，将域名地址+端口发送给他人，即可访问 ...
新手 Vue 项目运行
有你真好的博客
11-11 6228
2.1 回到Idea后端的springboot项目，找到src--> rescources --> front.front --> index.html文件，打开之后找到 adminurl : 'adminurl'2.6 至此，前端Vue程序已经运行起来，结合前面的spingboot项目，我们已经将整个springboot + Vue项目运行起来。打开cmd命令行，按住win+R，出来命令行窗口，输入cmd，出来终端窗口。在运行项目之前，确保运行vue项目的环境已经安装成功，并可以找到；
其他人如何查看前端工程师在本地跑的vue项目（0.0.0.0）
01-20
因为现在一般都是前后端分离开发的模式， 有时候后台的同事需要查看当前的项目，我们应该怎么办呢。例如我们现在开发的vue项目。 其实很简单只要前端在项目中设置一下就行 那就是在config文件夹下的index.js文件中 将 host : ‘localhost’,修改为 host: ‘0.0.0.0’ 就可以了。 然后别人只需要访问 http:// + 前端电脑的IP地址 + 端口号 就可以直接访问他本地在跑的项目了！ 话不多说，直接上图 ↓↓↓ 我们创建的项目中host 的默认值为 localhost，我们要做的就是将他的值修改为 0.0.0.0 然后获取前端同学的IP地址 例如我的是 1
【Vue2】让别人访问自己本地运行项目
joanmelon的博客
02-25 3308
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
让别人访问自己的vue项目
xuexuexiang的博客
05-10 3525
如何让他人免费地可以访问自己的vue项目呢，就可以把项目上传到GitHub或者Gitee，但是由于GitHub是国外，总是不稳定，所以这里选择使用Gitee。 首先使用npm serve bulid命令，将项目打包，打包成功后，会生成一个dist文件，也就是我们所要上传的文件。 在网页上的Gitee创建一个仓库，然后通过使用git bash命令行，将dist文件上传到Gitee。 在git bash命令下进入到vue项目的文件夹下，（也可以自己建立一个文件夹，然后将dist文件复制到这个文件夹下，前者
怎么让别人访问自己的本地vue项目
qq_45780380的博客
04-29 1969
怎么让别人访问自己的本地vue项目
本地vue项目的本地调试，同一个局域网下如何让其他人也可以访问我的本地项目
Zzexi的博客
08-18 6439
本地vue项目的本地调试，如何让其他人也可以访问我的本地项目（同一个局域网下） 我们只需要在config文件夹下配置下host属性，只需要把host:"",里面的值改为你本地的ip即可，记得加上端口号 如果是vue-cli3没有config文件，就在根目录创建上vue.config.js文件，然后同样配置host属性即可。 ...
局域网下别人访问本地运行的vue项目
weixin_52268321的博客
06-12 1381
进入“防火墙和网络保护”，关闭下面三个。
详解如何运行vue项目
10-17
如何运行Vue项目是一个涵盖了多个步骤的知识点，包括环境搭建、项目初始化、依赖安装以及实际运行等环节。以下将详细解释这些知识点： 首先，要运行Vue项目，需要搭建必要的开发环境。其中，Node.js是基础，它包括...
vue项目的启动、idea启动vue项目、idea运行vue项目、以及vue项目页面跳转逻辑、跳转vue项目页面逻辑.doc
08-29
启动Vue项目通常涉及到几个步骤，首先是确保本地环境已安装必要的工具，如Node.js，接着是通过命令行或者集成开发环境（IDE）来启动项目。 1. **安装Node.js**： - 访问官网 [https://nodejs.org/en/]...
vue如何让其他人访问本地地址
weixin_45776545的博客
07-14 1623
3. 打开您的 Vue 项目根目录中的 `vue.config.js` 文件，将 `public` 属性的值修改为您的 IP 地址加上端口号。1. 首先，请确保您的 Vue 应用程序正在运行，并已经按照之前提到的方式将开发服务器的主机地址设置为 `host: '0.0.0.0'`，公共访问地址设置为 `public: 'localhost:1111'`，端口设置为 `port: 1111`。通过以上步骤，您应该能够在浏览器的开发者工具中的 Network 标签下看到以您的本机地址开头的请求。
在没有测试环境情况下如何让其他人访问本地vue项目
qq_36571836的博客
11-24 371
vue内网穿透本地项目
vue别人访问自己的本地vue项目
qq_39920109的博客
11-22 1700
同事想看我的本地vue项目，给她配个IP就好啦！如下： 在项目中找到 config → index.js 中，将host改为你的IP地址，端口自定义，先本地运行起来后，然后让别人跟你在同一局域网下就可以访问你的本地项目了！ 运行： ...
vue项目，别人电脑上看你本地的项目
Achong999的博客
02-24 2567
别人打开这个就可以访问你本地项目了（类似于：192.168.100.100:8089 ）（PS：连同一个WiFi，必须在同一个局域网才行）npm run dev --host 报错。4. 电脑IP+端口即可访问了。
VUE搭建项目，配置本地IP地址其他人可访问项目（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
07-06 2846
VUE搭建项目，配置本地IP地址其他人可访问项目
springboot项目和vue项目从零开始在服务器上打包运行，并使用nginx代理，让外网访问
qq_49721447的博客
06-16 2176
springboot项目和vue项目从零开始在服务器上打包运行，并使用nginx代理，使外网可以访问
vue项目本地启动，外部访问配置修改
weixin_38194239的博客
02-27 1650
vue项目本地启动，外部访问配置修改 1、vue-cli2项目中，找到config目录下，index.js 把index.js 的 host: ‘localhost’ 修改为host: ‘0.0.0.0’, 2、通过cmd 中ipconfig找到你的ip地址 3、这样外部就可以通过IP地址来访问你本地启动的项目了 ...
Vue项目本地运行环境下设置既能localhost访问又能IP访问，并且可以外网环境下通过域名访问
热门推荐
u011295864的博客
03-04 1万+
打开项目build下index.js文件，将localhost改为 0.0.0.0，port端口号改不改都行，只要保证这个端口号没有被占用即可。 然后打开项目package.json文件，找到 将红框内的改为： "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --ho...
vue项目本地运行地址后缀
最新发布
03-21
<think>嗯，用户想了解Vue项目本地运行时的地址后缀配置方法。首先，我需要回忆一下Vue的配置方式，尤其是关于路由和服务器设置的部分。Vue项目通常使用vue-cli，所以应该先想到vue.config.js文件里的devServer配置。 然后，用户提到的地址后缀可能指的是URL中的路径，比如在开发环境下访问http://localhost:8080/somepath这样的形式。这可能涉及到两个部分：路由的base路径和开发服务器的publicPath。对于Vue Router，base选项可以设置基础路径，这样所有路由都会加上这个前缀。而开发服务器的publicPath配置则决定了静态资源的访问路径，同时可能影响服务器的根路径。 接下来，我需要检查是否有相关的引用内容。例如，引用[1]提到vue cli的配置，引用[4]讨论了环境变量process.env的使用，引用[5]展示了Nginx的配置。这些可能对回答有帮助。不过用户的问题是关于本地运行的配置，所以可能需要重点关注vue.config.js中的devServer设置，以及环境变量的配置方法。 另外，用户可能需要区分开发环境和生产环境的配置。本地运行时通常是开发环境，所以使用devServer的配置。而生产环境可能需要调整服务器的设置，比如Nginx的location块，如引用[5]所示。但用户的问题集中在本地运行，所以重点在vue.config.js。 可能的步骤包括：1. 配置Vue Router的base选项；2. 在vue.config.js中设置publicPath和devServer的publicPath；3. 使用环境变量来动态设置这些路径，如引用[4]提到的process.env。同时，可能需要通过环境变量文件（如.env.development）来管理不同的配置。 还需要考虑是否需要在访问URL时添加后缀，比如通过history模式的路由或hash模式的区别。如果用户使用的是history模式，可能需要配置devServer的historyApiFallback来正确处理路由。 最后，用户可能遇到的问题包括配置后路径不正确，页面无法加载资源，或者路由跳转错误。因此，问题排查部分需要提到检查配置、查看Network请求、服务器日志等，如引用[3]中的问题排查步骤。 总结一下，回答应该分步骤说明配置方法，涉及Vue Router、vue.config.js、环境变量，并给出示例代码和注意事项，同时附上相关问题帮助用户深入理解。</think>### Vue项目本地运行地址后缀配置方法 #### 一、配置原理 Vue项目本地运行的地址后缀主要通过路由基础路径($base$)和开发服务器配置实现。核心配置涉及两个部分： 1. **Vue Router基础路径**：通过`base`属性定义所有路由的前缀，例如设置为`/myapp/`时，所有路由路径将变为`http://localhost:8080/myapp/home` 2. **开发服务器publicPath**：通过`vue.config.js`中的`publicPath`和`devServer.publicPath`控制静态资源访问路径[^4] #### 二、具体配置步骤 **1. 路由配置（Vue Router）** ```javascript // router/index.js const router = createRouter({ history: createWebHistory(process.env.BASE_URL), // 使用环境变量 base: process.env.BASE_URL, // 动态基础路径 routes: [...] }) ``` **2. 环境变量配置** ```bash # .env.development VUE_APP_BASE_PATH=/myapp/ ``` **3. vue.config.js配置** ```javascript module.exports = { publicPath: process.env.VUE_APP_BASE_PATH, // 静态资源路径 devServer: { publicPath: process.env.VUE_APP_BASE_PATH, // 开发服务器路径 historyApiFallback: { rewrites: [{ from: new RegExp(`^${process.env.VUE_APP_BASE_PATH}`), to: process.env.VUE_APP_BASE_PATH }] } } } ``` **4. Nginx本地模拟配置（可选）** ```nginx location /myapp/ { proxy_pass http://localhost:8080/; proxy_set_header Host $host; } ``` （参考服务器配置思路[^5]） #### 三、验证配置 启动项目后访问： ``` http://localhost:8080/myapp/ ``` 所有静态资源请求路径应包含`/myapp/`前缀，例如： ``` http://localhost:8080/myapp/js/app.1234.js ``` #### 四、注意事项 1. 路径结尾必须包含`/`符号，避免路由解析错误 2. 使用`process.env`环境变量时需以`VUE_APP_`开头命名 3. 部署生产环境时需同步配置服务器（如Nginx的`location`规则） 4. 跨域问题建议使用devServer的proxy配置[^1]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值