0

我正在尝试创建一个 Wordpress 主题开发环境（更准确地说是从带有浏览器同步的 gulp 迁移到 webpack）。因此，我设置了一个代理指向我的 wordpress 安装（也在本地）。当我在浏览器中访问 webpack 开发服务器时，代理似乎工作正常。例如localhost:8080/sample-page显示 WordPress 页面localhost:8000/sample-page。

问题是，该页面内的任何链接都将指向原始端口。当我使用页面上的导航时，我被重定向回localhost:8000/*.

使用 gulp，我只需要创建浏览器同步任务，其中一个选项是目标 URL，它运行良好：

browserSync.init({
  proxy: pjson.themeURL || "localhost:8000",
  open: false
});

我尝试更改 HTTP-proxy-middleware 的不同选项，目前，我得到了以下配置（我还尝试了自动重写等选项）：

  devServer: {
    publicPath: `${options.publicPath}/build/`,
    proxy: {
      "*": {
        target: pjson.proxyURL || "http://localhost:8000",
        logLevel: "debug",
        secure: false,
        changeOrigin: true
      }
    }
  },

publicPath 将解析为/wp-content/themes/theme-name/build/（我也尝试包括整个 url 而不仅仅是路径）

我希望我可以让它像浏览器同步代理一样运行。也许我需要设置一些标题？

我感谢所有的帮助！

编辑：

我从浏览器同步源中找到了以下代码，它似乎有一种方法负责替换页面内的所有链接： https ://github.com/BrowserSync/browser-sync/blob/master/packages/browser-同步/lib/server/proxy-utils.js

开发服务器似乎有可能使用onProxyRes钩子修改请求，我可以在其中执行修改所有链接之类的操作，我只是没有时间尝试，所以我现在使用浏览器同步 atm。

4

1 回答 1

0

我还没有找到解决方案，我目前的解决方法是在webpack -watch没有 webpack-dev-server 的情况下使用和浏览器同步，但是这样热重载将不起作用：/

我的 webpack 配置插件目前看起来像这样：

  plugins: [
    new BrowserSyncPlugin({
      port: pjson.themeConf.port || 3000,
      proxy: pjson.themeConf.proxyURL || "localhost:8000",
      files: ["**.php"]
    }),
    new MiniCssExtractPlugin({})
  ],
于 2019-07-16T07:02:54.523 回答