新版的vue-cli構(gòu)建的項(xiàng)目沒有dev-server.js如何配置proxyTable

新版的 vue-cli 構(gòu)建的項(xiàng)目沒有 dev-server.js 如何配置 proxyTable 。
與之替代的是 webpack.dev.conf.js 配置文件。但是該工程并沒有默認(rèn)依賴插件 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 之后發(fā)現(xiàn)不起作用，請求地址沒有正確轉(zhuǎn)換，仍然是 http://localhost:8080/api/xxx 這樣的格式。

求助一下新版的 vue 腳手架構(gòu)建的項(xiàng)目如何正確配置 proxyTable 。

說明：新版的 build 目錄中沒有 dev-server.js 和 dev-client.js 這兩個(gè)文件，也沒有默認(rèn)依賴 http-proxy-middleware 插件。

回答

編輯回答

失魂人

你看下這個(gè)
或者這個(gè)

2017年8月18日 21:27

編輯回答

風(fēng)清揚(yáng)

你應(yīng)該在config/index.js 中加上反向代理

2017年8月11日 09:43

編輯回答

荒城

出現(xiàn)一樣的問題，樓主解決了嗎？

2017年8月24日 16:05

編輯回答

我以為

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

   proxyTable: {
      '/mz':{    /
      target: 'https://m.maizuo.com',
      pathRewrite: {'^/mz' : ''}, // /mz 做為標(biāo)識，到最后是要被替換掉的。
      changeOrigin: true
      }
    },

然后在你要跨域的組件中定義一個(gè)方法，

   methods:{
        getData(){
            let that = this
            axios.get('http://localhost:3000/mz/v4/api/billboard/home',{
                params:{__t:Date.now()}  //用params 是必須的，文檔中有說
            }).then((response)=>{        //接收你要的數(shù)據(jù)
                console.log(response.data.data.billboards);
                that.billboards = response.data.data.billboards
            })
        }
    }

并把這個(gè)方法放在created鉤子函數(shù)中

   created(){
        this.getData()
    }

2017年9月9日 03:59

編輯回答

柚稚

在config目錄下的index.js文件中有個(gè)dev對象，為其中配置proxyTable即可。
另外如果你想使用node.js寫數(shù)據(jù)接口的話，可以在build文件夾下的webpack.dev.conf.js文件中，為devServer添加以下內(nèi)容：

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

2018年9月13日 17:46

編輯回答

逗婦乳

我的配置和你的一樣但是我的能獲取到數(shù)據(jù)，我不知道你是不是需要跨域，如果是跨域，那么你的target后面應(yīng)該要跟一個(gè)端口號吧？其實(shí)我現(xiàn)在也有問題，我的問題就是怎么在這里面配置多個(gè)接口。因?yàn)槲疫@項(xiàng)目里面的數(shù)據(jù)至少有五個(gè)接口，全是需要跨域獲取。圖片描述