cpolar + vue内网穿透配置事项

场景

• 开了内网穿透之后，本地跑的项目就不需要内网也能访问了。
• 这里用的工具是cpolar，简单，快速上手，有低配免费套餐，能够搭载小型项目，大型项目可能会有请求高并发的情况，这时候用免费套餐就不能满足了，会报429请求错误。

问题总结

• 教程步骤里的配置不要漏了，./cpolar authtoken NTVlYmIyZWMtODlmNi00MGFmLWJlN2ItZTI3ZGE4OGE4N2Yx
• 环境变量会自动生成，如果没生成，自己添加一下cpolar.exe的路径到环境变量就好了
• 运行了 cpolar 端口号命令，如：cpolar 8080之后，命令行里输出的两个隧道：

  http://link1 -> http://localhost:8080
  https://link2 -> http://localhost:8080
  

  箭头前面的两个链接就是配置好之后，外网可以访问你本地项目的链接，或者也可以直接在cpolar登录后的个人状态里看到
• vue如果不做任何处理，会出现访问一个空页面报Invalid Host header，这是因为vue项目本地run时默认自带的host拦截，需要在vue.config.js里修改配置，但是vue2和vue3的配置方式不一样：
  • vue2

  module.exports = {
    ...
    devServer: {
      disableHostCheck: true
    }
  }
  

  • vue3

  const { defineConfig } = require('@vue/cli-service')
  module.exports = defineConfig({
    ...
    devServer: {
      allowedHosts: 'all'
    }
  })
  

  • vite

  import type { UserConfig } from 'vite'
  
  const config: UserConfig = {
    ...
    server: {
      host: true,
    }
  }
  

  然后就可以外网访问了