How to separate front and back code in one VUE project?

Question

Vue.js

I do not want one bundle to be used for both the client side and the admin side. At the same time, css wants to have the same. How can I specify that a particular template should not go into the general bundle? Or is it easier to do 2 parallel projects?

Answer 1

If you use the asynchronous syntax for the router, then by default the webpack will cut into bundles as it should:
https://router.vuejs.org/en/guide/advanced/lazy-lo...
for example:

const routes = [
  {
    name: 'index',
    path: '/',
    component: () => import('Index.vue'),
  },
  {
    name: 'test',
    path: '/test',
    component: () => import('Test.vue'),
  },

]