Vuepress 代理设置问题

问题描述

描述下我的需求, 在Vuepress开发阶段,我希望能够看到我笔记的图片,那么我可能设置图片的访问链接为http://192.168.31.124:9002/picture/markdown/XXX.png, 因为开发阶段,进行测试时, html文件和 图片资源都是来自于内网, 所以img标签不会发生跨域问题, 但是一旦我将服务器部署到公网上时,就会产生跨域问题, 无法获取到图片,跨域是浏览器的问题, 这个时候有两种解决方案, 开发时使用相对路径 /picture/markdown/XXX.png, 在公网服务器设置代理, 将图片路径进行转发到 图片服务器. 但是这个时候我在开发时就无法看到我的笔记图片,所以解决方案时, 修改开发环境的配置, 在开发时我们使用Vue的webpack的devServer 设置代理, 将/picture 路径进行转发, 这样就可以不改变笔记的图片链接, 并且本地和公网都可以看到图片.

Vuepress 设置代理

在 .vuepress 文件下的config.js中, 添加如下

module.exports = {
  // 代理配置, 最好放在第一行,我之前放在别的地方好像没有起效果
  devServer: {
    https: false, // 默认是false, 默认就是http协议，true将http协议转换为https协议
    // 代理配置
    proxy: {
      '/picture': { // 配置需要代理的路径 --> 这里的意思是代理http://localhost:80/picture/后的所有路由
        target: 'http://pi:9002/', // 目标地址 --> 服务器地址
        changeOrigin: true, // 允许跨域
        ws: true, // 允许websocket代理
        // 如果这里没有进行路径重写，当你访问http://localhost:80/api/login/,实际上访问的就是https://172.20.9.153:8085/api/login/
        pathRewrite: { // 重写代理路径
          // 就是把路径中的api都替换为空的字符串
          // '^/picture': '', // 因为服务端地址里面是没有api字段的，api只是为了区别需要代理的路径，如果服务端有api字段则不需要重新	
        }
      }
    }
  },
}

值得注意的是, webpack的代理配置地址的 理解 与 Nginx的代理配置的理解不同..
在webpack中 '/picture' 这个路径会拼接在被代理的服务器.当target为http://192.168.31.124:9002/
例如:
访问 http://localhost:8080/picture 会被代理到 http://192.168.31.124:9002/picture

如果target为http://192.168.31.124:9002/picture, 代理链接是http://192.168.31.124:9002/picture/picture

结论: 也就是说被代理的链接,会被自动拼接在target的服务器后面.

然而 Nginx的代理方式却不同

在上面中 /picture/,并不会被拼接在 proxy_pass里面, 就必须进行写上路径