Dev Story..

가끔씩 VUE객체에 접근해서 보고 싶을 때 아래와 같이 사용하면 된다.

var myVue1 = document.getElementById("myVueId").__vue__;
var myVue2 = document.getElementsByClassName("myVueClass")[0].__vue__;

로컬에서 devserver를 활용하다보면 contextpath가 달라서 서버 CSRF 토큰 체크가 안되서 PUT, POST 메소드가 안되는 현상이 있다. 이럴 땐 onProxyRes를 활용해서 강제로 Path를 치환해주면 된다.

devServer:{
    proxy: {
      "/api": {
        target: "http://localhost:8000",
        pathRewrite: {"^/api" : ""}
      }，
      onProxyRes: function(proxyRes, req, res) {
          var cookies = proxyRes.headers['set-cookie'];
          var cookieRegex = /Path=\/XXX\//i;
                     / / Modify the cookie Path
          if (cookies) {
            var newCookie = cookies.map(function(cookie) {
              if (cookieRegex.test(cookie)) {
                return cookie.replace(cookieRegex, 'Path=/');
              }
              return cookie;
            });
                         / / Modify the cookie path
            delete proxyRes.headers['set-cookie'];
            proxyRes.headers['set-cookie'] = newCookie;
          }
        }
    }
}

node.js npm 설치

nodejs.org/ko/

안정화버젼 설치

안정화 버전을 다운로드 및 설치한다.

node -v

설치가 제대로 되었는지 확인한다.

C:\Users\hello>npm install -g @vue/cli

vue-cli 3을 설치한다.

vue create vue-practice

버젼 2로 진행

vscode실행

code .

터미널 실행 후 로컬서버실행

npm run serve

ctrl+마우스좌클릭