Vue ) 프록시 설정. Dev Server has been initialized using an options object that does not match the API schema.

나는 뷰를 cli를 통해서 설치한게 아니라 따로 npm으로 필요한것만 설치를 했었다. 

 

그러다 보니 구글링해서 많이 나오는 것을 가져다 쓰면 오류범벅...

 

그래도 덕분에 이걸쓰려면 뭐가 필요한지 알아가는것같으니 좋다고 생각하자..하하

 

프록시를 설정하는와중에 나오는 오류다.

 

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options.proxy should be one of these:
   object { … } | [object { … } | function, ...]
   -> Allows to proxy requests, can be useful when you have a separate API backend development server and you want to send API requests on the same domain. 
   -> Read more at https://webpack.js.org/configuration/dev-server/#devserverproxy
   Details:
    * options.proxy should be an object:
      object { … }
    * options.proxy should be an array:
      [object { … } | function, ...]

 

 

 

결론부터 말하면, 프록시를 사용할 수 있도록 해주는 미들웨어가 설치되있지 않아서 생기는 오류다. 

미들웨어를 설치해주자.

npm i http-proxy-middleware --save

package.json에 "http-proxy-middleware"가 생길것이다.

 

 

코드로 프록시를 설정해주자

 

pakage.json

"scripts": {
    "start": "webpack-dev-server --mode development --port 3000"
 },

 

webpack.config.js

module.exports = {
  entry: './src/main.js',
  module: {
    ...
  },

  devServer : {
    proxy : {
      '/api' : 'http://localhost:8080'
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
    new VueLoaderPlugin(),
  ]
};

 

 

실행

드디어 성공적으로 잘 실행되고 localhost:3000 으로 잘 접속된다!