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',
},
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',
},
1 Answer
Reset to default 0Your 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 fet 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