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

编程问答 2022-05-31

问题描述

我想在 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");

我收到一个错误：

enter image description here

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

我做错了什么？

解决方法

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

在我的设置中，我让 nginx 侦听端口 8888，而 Webpack Dev Server 侦听端口 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。

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

,

终于启动并运行了。 我在 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-cliionic-frameworkvue.js