Vue代理设置不起作用 [英] Vue proxy setting does not work

问题描述

我有一个@vue/cli 3.x版本的Vue项目.

I have a Vue project from @vue/cli 3.x.

我在package.json中基于本文不起作用.目标服务器看不到API请求.

The proxy I defined in package.json based on this article is not working. The destination server doesn't see the API request.

我在这里想念什么?

vue文件:

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import VueResource from 'vue-resource';

Vue.use(VueResource);

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;

  constructor() {
    super();

    this.$http.post('/api');
  }
}
</script>

package.json:

package.json:

  "proxy": {
    "/api": "http://localhost:9000/api"
  },

推荐答案

本文可能涉及设置代理的过时方法.最新版本的@vue/cli(当前为3.0.0-rc.3)具有新方法，其值为配置开发服务器.

The article likely refers to an outdated method of setting up the proxy. The latest version of @vue/cli (currently 3.0.0-rc.3) has a new method of configuring the dev server.

对于该代理的等效设置，创建具有以下内容的vue.config.js(如果尚不存在):

For an equivalent setup of that proxy, create vue.config.js (if it doesn't exist already) with the following contents:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:9000',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

这篇关于Vue代理设置不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！