Cpolar外网访问本地项目_为啥用 cpolar 暴露vue项目 到公网无效

认识 Cpolar

Cpolar 是一个内网穿透服务，它可以把内网本地项目通过隧道公布到公网上，供外网用户访问，使公网也可以访问到本地项目，相当于你的本地电脑通过 Cpolar 穿透，变相的你的电脑也就成了一个小型服务器。

适用场景

1. 在项目没有正式上线的时候可以通过 cploar 进行演示

2. 前端人员自写工具可进行访问项目

使用须知

在使用 cpolar 进行穿透时本地内网项目时，确保本地项目不能中断或是关闭电脑，否则穿透公网地址无法正常访问。

以上原因：cpolar 只是基于本地项目做穿透，它本身并不能获取你的项目，和在服务器上部署性质一样，但服务器上会确保不关机及项目稳定性。

使用案例

首先本地需要启动一个项目举例为（Vue：npm run serve/dev）或者使用 http / express + path 启动一个新端口并且访问入口文件（例如：Vue build 后生成的 dist 文件夹），后者再将启动的端口号在 Cpolar-Web 创建隧道输入端口号，到此步 Cploar会生成 Http / Https 列表中有公网访问地址（免费或花钱自定义二级三级域名）。

本地启动项目

方法一：启动一个 Vue 项目,默认端口号为 80，可自行定义 - devServer。

npm run serve

方法二：http / express + path 创建一个端口。

const express = require('express');
const path = require('path');
 
const app = express();
 
// 指定静态文件夹路径
const distPath = path.join(__dirname, 'CodeDemo')
 
// 指定特定的 index.html 作为入口文件
app.get('/', (req, res) => {
  res.sendFile(path.join(distPath, 'index.html'));
});
 
// 使用静态文件夹路径
app.use(express.static(distPath));
 
const port = 9988;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Cpolar 创建隧道

1. 下载 Cpolar，一键 Next 即可。cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站

2. 创建隧道如下：

确保本地地址选项与本地一致。

3. 隧道列表查看公网地址

到此步骤，你已经可以让外网用户成功访问本地项目了。