新版的vue-cli构建的项目没有dev-server.js如何配置proxyTable

Question

新版的 vue-cli 构建的项目没有 dev-server.js 如何配置 proxyTable 。
与之替代的是 webpack.dev.conf.js 配置文件。但是该工程并没有默认依赖插件 http-proxy-middleware。
我尝试使用之前的配置方式，先安装了依赖，然后在 build/index.js 的 dev 中将 proxyTable 做如下配置：

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://api.xxx.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.HOST, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: true,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false,
  }

重新 run 之后发现不起作用，请求地址没有正确转换，仍然是 http://localhost:8080/api/xxx 这样的格式。

求助一下新版的 vue 脚手架构建的项目如何正确配置 proxyTable 。

说明：新版的 build 目录中没有 dev-server.js 和 dev-client.js 这两个文件，也没有默认依赖 http-proxy-middleware 插件。

Answer 1

在config目录下的index.js文件中有个dev对象，为其中配置proxyTable即可。
另外如果你想使用node.js写数据接口的话，可以在build文件夹下的webpack.dev.conf.js文件中，为devServer添加以下内容：

before(app) {
      app.get('/api/xxx', function(req, res) {
        // doSomeThing
      })
}

Answer 2

你应该在config/index.js 中加上反向代理

Answer 3

你看下这个
或者这个

Answer 4

请问解决了？

Answer 5

自己建一个config/index.js

Answer 6

请问解决了吗？刚好遇到这个问题

Answer 7

跟dev-server.js的目录build平级的，有一个config目录（正常排序就在他旁边）。
进config目录的index.js，在dev下配置如下：

dev: {
...
proxyTable: {
  '/api': {
    target: 'http://localhost:2000',
    changeOrigin: true
  }
}
}

Answer 8

出现一样的问题，楼主解决了吗？

Answer 9

在config文件中找到index.js配置proxyTable

   proxyTable: {
      '/mz':{    /
      target: 'https://m.maizuo.com',
      pathRewrite: {'^/mz' : ''}, // /mz 做为标识，到最后是要被替换掉的。
      changeOrigin: true
      }
    },

然后在你要跨域的组件中定义一个方法，

   methods:{
        getData(){
            let that = this
            axios.get('http://localhost:3000/mz/v4/api/billboard/home',{
                params:{__t:Date.now()}  //用params 是必须的，文档中有说
            }).then((response)=>{        //接收你要的数据
                console.log(response.data.data.billboards);
                that.billboards = response.data.data.billboards
            })
        }
    }

并把这个方法放在created钩子函数中

   created(){
        this.getData()
    }

Answer 10

我的配置和你的一样但是我的能获取到数据，我不知道你是不是需要跨域，如果是跨域，那么你的target后面应该要跟一个端口号吧？其实我现在也有问题，我的问题就是怎么在这里面配置多个接口。因为我这项目里面的数据至少有五个接口，全是需要跨域获取。

Answer 11

请问解决了么. 貌似webpack.dev.conf 下的devServer下能配?