如何在本地开发的Vue别人看到·使用内网穿透工具·以下以ngrok为例 安装ngrok

作者：编程小白 | 发布时间：2025-06-20 |

如何在本地开发的Vue代码被别人看到？

  1. 使用本地服务器
  2. 部署到云服务器
  3. 使用第三方平台
  4. 使用远程协作工具

使用本地服务器

  1. 启动本地服务器：

    2. 如果你的Vue项目是使用Vue CLI创建的，那么只需要执行以下命令即可启动开发服务器：

    npm run serve

    这通常会在本地开启一个默认的端口，如 8080。

  2. 配置端口转发：

    3. 如果你能访问并配置路由器或防火墙，可以将外部请求转发到你的本地服务器。

  3. 使用内网穿透工具：

    4. 常用的内网穿透工具有ngrok、frp等。以下以ngrok为例：

    • 安装ngrok。
    • 启动ngrok并暴露本地端口。

      • 例如：

      ngrok 8080

      这将生成一个公共URL，别人就可以通过这个URL访问你的项目。

部署到云服务器

  1. 选择云服务器提供商：

    2. 比如阿里云、腾讯云、AWS等，根据需求选择合适的配置。

  2. 配置服务器环境：

    3. 安装Node.js和npm，并配置Web服务器（如Nginx）。

  3. 部署Vue项目：

    4. 在本地打包项目，上传到服务器并配置Nginx指向项目目录。

使用第三方平台

平台 如何使用
GitHub Pages 将项目推送到GitHub，然后在设置中启用GitHub Pages。
Netlify 通过GitHub、GitLab或Bitbucket连接项目，一键部署。
Vercel 通过Git仓库连接项目，自动部署。

使用远程协作工具

工具 如何使用
Live Share 安装Visual Studio Code的Live Share扩展，生成共享链接。
CodeSandbox 上传Vue项目到CodeSandbox，生成共享链接。
StackBlitz 上传Vue项目到StackBlitz，生成共享链接。

分享Vue本地代码的方法有多种，选择哪种取决于具体需求。快速分享和协作可以选择内网穿透工具和远程协作工具，而稳定展示可以选择部署到云服务器或使用第三方平台。