How to change the entry point to something other than the default 'src/main.js' using Vite?

Question

I want to point to a different location and file name and deviate from the Vite standard.

Let's say my js file is in out/frontend/../../out.js. I got it working when I rename it to main.js and copy it in the root of my project where index.html and vite.config.js live. But I would prefer to change the entry point somehow...

I tried this:

rollupInputOptions: {
  // or whatever your entry file is
  input: resolve(__dirname, 'out/frontend/my/path/out.js')
}

Did not work. Any suggestions?

score 5 · Answer 1 · answered Sep 27 '21 at 04:50

5

As of Vite 2, the entry file is specified in a <script> tag in index.html:

<script type="module" src="/src/main.js"></script>

You can change that file to the one you want:

<script type="module" src="/out/frontend/my/path/out.js"></script>

demo

answered Sep 27 '21 at 04:50

tony19

125,647
18
229
307

score 2 · Answer 2 · answered Jul 06 '21 at 09:36

Use resolve from path module and add an alias in vite.config.js config to resolve paths, check.

import { resolve } from 'path'

module.exports = {
  ...
  resolve: {
    alias: {
      '@': resolve(__dirname, '../out/'), // resolve path
    },
  },
  rollupInputOptions: {
    input: resolve(__dirname, '../out/entrypoint.js') // custom main
  }
}

to import a module from resolved path use '@', eg: import { myModule } from '@/mymodule'
You will have to adjust the path of the new entrypoint in the index.html file.

How to change the entry point to something other than the default 'src/main.js' using Vite?

2 Answers2