vuejs3vite

How to change entry file in Vue3, Vite?

I am using Vue3 & Vite. My question is, how can I configure entry point file of a page?

I have directory structure like this:

project_root
ㄴapps
  ㄴapp1
    ㄴpublic
      ㄴindex.html
  ㄴskeleton
    ㄴsrc
      ㄴmain.ts
...

index.html's body:

<body>
  <div id="app"></div>
</body>

main.ts:

const app = createApp(SomeApp);
app.mount('#app');

I would like to use app1's index.html file and use skeleton/src/main.ts. How can I do this?

When I was using Vue2, I configured multi-page in vue.config.js like this:

  pages: {
    index: {
      entry: '../skeleton/src/main.ts',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Some Title',
    },
Solution

  • Your index.html is the entry point and everything else is resolved based to its location. You can check docs for a way to specify alternative root. Don't forget to move vite.config.ts to the same directory as index.html.

    Location of your main.ts is specified in the index.html:

    <div id="app"></div>
<script type="module" src="/src/main.ts"></script>

    Location of App.vue is specified in the main.ts file. You can further explore config possibilities with, say, checking how docs describe configuration of multi-page apps: https://vite.dev/guide/build.html#multi-page-app