Vue代理设置不起作用答案

【问题标题】：Vue proxy setting does not workVue代理设置不起作用
【发布时间】：2018-11-27 11:50:28
【问题描述】：

我有一个来自 @vue/cli 3.x 的 Vue 项目。

我在package.json 中基于this article 定义的代理不起作用。目标服务器看不到 API 请求。

我在这里错过了什么？

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:

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

【问题讨论】：

标签： http webpack vue.js

【解决方案1】：

该文章可能涉及设置代理的过时方法。最新版@vue/cli（目前为3.0.0-rc.3）有配置开发服务器的new method。

对于该代理的等效设置，使用以下内容创建 vue.config.js（如果它不存在）：

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

【讨论】：