如何让别人远程访问我本地运行的Vue项目？

本文共计687个文字，预计阅读时间需要3分钟。

目录+让他人访问本地运行的vue项目+

1.修改vue项目中config文件下的index.js+

2.在window下输入cmd调用控制台+

3.在控制台输入防火墙并关闭防火墙+本地运行打包后的vue项目+打包测试（搭建）

目录

• 让别人访问本地运行的vue项目
• 1. 修改vue项目中config文件下的index.js
• 2. window + R输入cmd调出控制台
• 3. 在控制面板中搜索防火墙并关闭防火墙
• 本地运行打包后的vue项目
• 打包测试（搭建服务器）

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

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项目

打包测试（搭建服务器）

打包后的代码必须放在服务器下才能运行，直接双击index.html是不行的。

下面介绍一种利用node.js的 www.baidu.com

(3) 注意

按照正常情况来说，这时会自动打开浏览器，渲染出你的项目。可是，在打包测试时，还发现了一些其他问题。

1.有时候打包运行时发现一片空白，这可能就是打包后的css/js的引入问题了。默认的引入方式是绝对路径方式。我们希望是相对路径，可以把config/index.js中的assetsPublicPath: ‘/’,改为assetsPublicPath: ‘./’,这样再打包出来的就是相对路径了。

assetsPublicPath: '/',  // 绝对路径 assetsPublicPath: './', // 相对路径

2.运行打包后的项目时，在非首页页面刷新时直接404，如果你的项目出现这个问题，那么你的router中一定是把mode定义为history了。定义hash模式则不会出这个问题。难道只能用很丑的hash？当然不是，其实vue-router官方文档的HTML5 History 模式对此已有说明，这个就需要后端的帮我们设置一下了。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持自由互联。