[Vue.js] vue-cli3 설정파일 정리

 

cli2랑 cli3의 설정이 이렇게 다를 수가 있을까..?

문법 하나 테스트해본다고 프로젝트 생성하는데 cli3로 시작하니 많은 문제에 직면하였다.

다음엔 실수가 없도록 문제가 되었던 main.js와 router.js를 이 곳에 기록한다....😑

 

 

📄 main.js

import { createApp } from 'vue';
import App from "./App.vue";
import router from "./router/index.js";

createApp(App).use(router).mount('#app')

 

📄 router.js

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "home",
    component: () => import("@/pages/Home.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;

// cli2 설정.. 이렇게하면 안됨
import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const router = new VueRouter({
    routes: [
        {
            path: "/",
            name: "Home",
            component: () => import("@/pages/Home.vue"),
        },
    ],
});

export default router;

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.