如何在 Ionic + Vue 中使用开发服务器代理？答案

【问题标题】：How to use a dev server proxy with Ionic + Vue?如何在 Ionic + Vue 中使用开发服务器代理？
【发布时间】：2021-04-10 07:45:11
【问题描述】：

我想在 Ionic Vuejs 项目中使用 Ionic 的代理功能。

我已经看到有关 Ionic + Angular 和 Vue + Webpack 代理问题的问题和答案，但找不到我的 Ionic + Vue 问题的解决方案。

现在我只是在浏览器中工作（即还没有为原生构建）。

我关注了instructions，我的ionic.config.json现在看起来像这样：

{
    "name": "myapp",
    "integrations": {
        "capacitor": {}
    },
    "type": "vue",
    "proxies": [
        {
            "path": "/webhp",
            "proxyUrl": "https://www.google.com"
        }
    ]
}

我运行 ionic serve --no-open 并浏览到 http://localhost:8100/webhp。

请求未代理，我的应用已加载，但出现路由器错误：[Vue Router warn]: No match found for location with path "/goto"。

当我尝试在我的代码中使用 AJAX 请求访问该 URL 时：

await axios.post("/webhp");

我收到一个错误：

我正在使用 Ionic CLI 6.12.2 和 Ionic Framework @ionic/vue 5.5.2。

我做错了什么？

【问题讨论】：

我有同样的问题 - 你有没有设法解决它？
@RichardShergold 有点，但方式不同。我放弃了使用 Ionic 开发服务器作为代理，转而使用 nginx。所以我在前面有 nginx，它根据路径代理到 Ionic 开发服务器或我的 (PHP) 后端。
我有一个非常相似的设置完全相同的问题。我试图从 ionic 的论坛获得答案，但直到现在，问题仍未解决。你能给我更多关于如何在 ngx 中使用设置的提示吗？
我什至尝试将 vue.config.js 与 ionic.config.json 并行使用。现在控制台向我显示，当我启动 ioinic 服务时，代理已激活但它仍然无法工作。
@Michael 当然，我把它贴在这里作为答案。

标签： vue.js ionic-framework ionic-cli

【解决方案1】：

终于搞定了。我添加了一个带有 devServer 部分的 vue.config.js，就像我在“普通”vue 项目中所做的那样。

ionic serve 没有从想要的代理配置开始，我的后端被代理到给定的地址。

这是我添加的 vue.config.js：

module.exports = {
  runtimeCompiler: true,      
  devServer: {
    proxy: {
      '/api': {
        target: 'http://ionicfez:8888/',
        changeOrigin: true,
        logLevel: 'info'
      }
    }
  },

  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'assets'
}

这是我的 ionic.config.json

{
  "name": "ionicfez",
  "integrations": {
    "capacitor": {}
  },
  "type": "vue"
}

我的项目结构如下

/ionicfez
  /public
    /api
      /hello.php
  /src
  ...

这是我的 .vue 文件中的一个简单测试函数，现在已被代理

init() {
  this.axios
    .get("public/api/hello.php")
    .then(result => {
      console.log(result)
    })
    .catch(error => console.error(error))
}

【讨论】：

谢谢！因为这个，我几乎放弃了离子。他们真的需要它来读取离子配置。当 ionic 文档仅引用 ionic 配置文件时，必须创建 vue 配置是没有意义的。
顺便说一句，我必须在代理路径中添加一个通配符。所以'^/api'而不是'/api'。否则它总是返回 404。

【解决方案2】：

我在评论中提到我使用 nginx 实现了一种解决方法，并被要求提供详细信息，因此我将其发布为答案。

在我的设置中，我让 nginx 在端口 8888 上监听，而 Webpack 开发服务器在端口 8100 上监听。

我通过端口 8888 访问网站，例如http://local.mydomain.com:8888/.

我的 nginx 配置如下所示：

server {
    listen 8888;
    listen [::]:8888;

    root /home/user/mydomain/public;
    index index.php;

    server_name local.mydomain.com;

    location / {
            proxy_pass http://local.mydomain.com:8100/;
            proxy_set_header Host local.mydomain.com:8100;
    }

    location /x/ {
            add_header Access-Control-Allow-Origin "*";
            try_files $uri $uri/ /index.php?$args;
    }

    location ~ \.php$ {
            include snippets/fastcgi-php.conf;
            fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
            fastcgi_keep_conn on;
            fastcgi_split_path_info ^(.+?\.php)(/.*)$;
            if (!-f $document_root$fastcgi_script_name) {
                    return 404;
            }
            fastcgi_read_timeout 86400;
            include fastcgi_params;
    }

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    location ~ /\.ht {
            deny all;
    }

    access_log /var/log/nginx/local.mydomain.com.access.log;
    error_log /var/log/nginx/local.mydomain.com.error.log;
}

对以/x/ 开头的路径的请求转到index.php。

所有其他请求都被代理到端口 8100 上的 Webpack。

其余的配置其实和这个代理的东西没有关系；我只是将它包含在内以提供完整的配置。

【讨论】：