What are some examples of Vite configuration?

What are some examples of Vite configuration?

Vite configuration can vary based on your project needs. For instance, you can customize the build options, define aliases, or set up plugins. Would you like to see a specific example?

Yes, can you show me how to set up an alias?

Sure! To set up an alias in Vite, you can modify the vite.config.js file like this:

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
});

This allows you to use @ as a shortcut for your src directory.

That’s helpful! What about configuring a plugin?

To configure a plugin, you can install it first, then add it to the plugins array in your vite.config.js. For example, to use the Vite PWA plugin:

import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [VitePWA()],
});

This will enable PWA features in your Vite project.

Thanks! Can you give me an example of a production build configuration?

Absolutely! For a production build, you might want to set options like base and build.minify. Here’s an example:

import { defineConfig } from 'vite';

export default defineConfig({
  base: '/my-app/',
  build: {
    minify: 'terser',
    outDir: 'dist',
  },
});

This config sets the base path and enables minification for the production build.