时间戳

首页 > 解决方案 > 如何在 Ionic + Vue 中使用开发服务器代理？

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

问题描述

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

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

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

我按照说明进行操作，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 CLI6.12.2和 Ionic Framework @ionic/vue 5.5.2。

我究竟做错了什么？

标签： vue.jsionic-frameworkionic-cli

解决方案

终于启动并运行了。我添加了一个带有 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))
}

推荐阅读