CODEWITHSUNDEEP
javascriptvue.jsvite
Quiint
Quiint

Reputation: 41

How do Vite MPAs using the Vue plugin work?

I have a Vite app created and I need it to have multiple pages. I read the docs and found how to do this (can be found here), however when I run the server I get a blank page.

My vite.config.js file:

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

const { resolve } = require('path')

module.exports = {
  build: {
    rollupOptions: {
      input: {
        home: resolve(__dirname, 'src/Home/index.html')
      }
    }
  }
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

Here's what my file structure looks like:

Image here

Edit: I have changed the config to what tony posted below, but it is still showing a blank page.

Edit 2: I found out that you don't need to use the vite.config.js routing, there's an easier way Create a copy of your main.js, App.vue, and index.html file and rename them to something different. After you rename them change the <script type="module" src="index.js"></script> to your new JS file, and change the .vue file import in your new main.js to your new .vue file. Here's my new structure:
enter image description here
All I did was copy the files and change the names and imports, and it worked!

Upvotes: 3

Views: 2546

Answers (1)

tony19
tony19

Reputation: 138616

You have two default exports in vite.config.js, but there should only be one:

module.exports = { 1️⃣
  //...
}

export default defineConfig({ 2️⃣
  //...
})

The config should be:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        home: resolve(__dirname, 'src/Home/index.html')
      }
    }
  }
})

GitHub demo

Upvotes: 2

Related Questions