vue3 + spring legacy + axios 설정(install 생략)

vue.config.js

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  
  // 배포 경로가 중복되면 indexPath 생량
  outputDir: "../src/main/resources/static", // npm run build
  // indexPath: "../static/index.html", // creating index.html
    chainWebpack: (config) => {
    const svgRule = config.module.rule("svg");
    svgRule.uses.clear();
    svgRule.use("vue-svg-loader").loader("vue-svg-loader");
  },
  
  
  // axios http 통신
  devServer: {
    // port: 8080, // vue server port
    proxy: {
      "/api": {
        target: "http://localhost:8081", // tomcat server port
        changeOrigin: true,
        // secure: false,
      },
    },
  },

});

 

포트(port)

• Vue : 8080
• Tomcat 9 : 8081

설정 내용

 스프링은 안건들고 Vue에 설정을 추가함 

1. 배포
   • 스프링에 build 할 때 필요한 설정
   • outputDir을 기준으로 했을 때 indexPath의 경로가 outputDir의 일부가 되면 에러가 발생함, indexPath 생략
2. axios
   • proxy 부분을 주목하면 되며 target을 설정하면 aixos 사용시 target을 생략하고 path를 작성해야 동작 가능

   • // target 설정했을 때 이렇게 작성하면 에러날 수 있음
     axios.get("http://localhost:8081/api/getList").then(...).catch(...)
     
     // target 부분을 생략하고 작성하면 됨
     axios.get(/api/getList").then(...).catch(...)