Change the output path for certain files during build - ViteJS

Question

I'm making a static multipage website with ViteJS (html, scss and JS) and I can't find the way to change the build path of html files to put them into the root of dist folder.

My project structure is:

├── dist
    └──...
    └──src
       └── pages
             └── some-page.html
    └──...
├── node_modules
├── src
    └── pages
        └── some-page.html
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
└── vite.config.js

and I want:

├── dist
    └── ...
    └── some-page.html
    └── ...
├── node_modules
├── src
    └── pages
        └── some-page.html
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
└── vite.config.js

my vite.config.js (as the documentation recommends) is:

const { resolve } = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
    build: {
        rollupOptions: {
            input: {
                main: resolve(__dirname, 'index.html'),
                multiminerales: resolve(__dirname, 'src/pages/some-page.html')
            }
        }
    }
})

So, I think I need to change the input object but I can't find any information about it, I know about public directory but it will break all my folders structure. What can I do?

Relevant, I think: Changing the input and output directory for multipage site - vitejs/vite GitHub — Darryl Noakes
– Darryl Noakes, Commented Jan 27, 2023 at 3:57
This answer to "Vite - change ouput directory of assets" seems to indicate that you can change the entire path and filename of built files as you like, so that could be worth looking into. I could try it out and write up an answer? — Darryl Noakes
– Darryl Noakes, Commented Jan 27, 2023 at 4:03
I have tried, but I can't find how to make Vite actually use Rollup to bundle anything in a vanilla project. I may look into it more sometime if I get a chance. — Darryl Noakes
– Darryl Noakes, Commented Jan 27, 2023 at 17:21

Captain Hat · Accepted Answer · 2023-04-04 12:32:37Z

0

You can use this configuration -

import { fileURLToPath, URL } from 'node:url'

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import vueJsx from '@vitejs/plugin-vue-jsx'

    export default defineConfig({
      root: resolve(path, 'templates'),
      base: 'https://aaronchristian.test/wp-content/themes/portfolio/',
      plugins: [vue(), vueJsx()],
      resolve: {
        alias: {
          '@': fileURLToPath(new URL('./src', import.meta.url))
        }
      },
      build: {
        rollupOptions: {
          input: {
            index: fileURLToPath(new URL('./src/main.js', import.meta.url)),
            'index.html': fileURLToPath(new URL('./templates/index.html', import.meta.url))
          },
          output: {
            dir: 'dist',
            entryFileNames: 'assets/[name].js',
            assetFileNames: 'assets/[name].[extname]',
            chunkFileNames: 'assets/[name].js'
          }
        }
      }
    })

edited Apr 4, 2023 at 12:32

Captain Hat

3,3471 gold badge17 silver badges42 bronze badges

answered Mar 24, 2023 at 21:22

The_Thinker

216 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Darryl Noakes Over a year ago

Having that code as a snippet makes no sense, as it cannot be run on its own. Please edit it to be just a plain code block (with the javascript language identifier).

KyleMit · Accepted Answer · 2023-01-22 21:04:14Z

-1

+400

Yeah, I faced such problem, too.

For me it works to move index.html to src/pages

Then in vite.config.js specify root: './src/pages'

So, your config may look like:

const { resolve } = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
    root: './src/pages',
    build: {
        rollupOptions: {
            input: {
                main: resolve(__dirname, 'src/pages/index.html'),
                multiminerales: resolve(__dirname, 'src/pages/some-page.html')
            }
        }
    }
})

edited Jan 22, 2023 at 21:04

KyleMit♦

31.4k74 gold badges517 silver badges712 bronze badges

answered May 9, 2022 at 16:34

toddscottik

4652 silver badges4 bronze badges

1 Comment

Disorder Over a year ago

The root option doesn't work if you want to use .env files or public folder. I'd like to just set output html path

Collectives™ on Stack Overflow

Change the output path for certain files during build - ViteJS

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related