Viteの最小限設定

vite.config.tsを作成する

ルートディレクトリに作成する

vite.config.ts

import { defineConfig } from 'vite'

export default defineConfig({
  ...
)}

Sassを使用する

$ npm i --save-dev sass

ベンダープレフィックスを使用する

$ npm i -D postcss autoprefixer

ルートディレクトリにpostcss.config.jsを作成して、以下を記述

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: { grid: "autoplace" },
  },
}

画像を圧縮する

ビルド時に画像を適切なサイズに自動的に圧縮する。

$ npm i -D vite-plugin-imagemin

vite.config.tsに追記

vite.config.ts

import viteImagemin from "vite-plugin-imagemin"

export default defineConfig({
  ...
   plugins: [
    vue(),
    viteImagemin({
      gifsicle: {
        optimizationLevel: 7,
        interlaced: false,
      },
      optipng: {
        optimizationLevel: 7,
      },
      mozjpeg: {
        quality: 80,
      },
      pngquant: {
        quality: [0.8, 0.9],
        speed: 4,
      },
      svgo: {
        plugins: [
          {
            name: 'removeViewBox',
          },
          {
            name: 'removeEmptyAttrs',
            active: false,
          },
        ],
      },
    }),
  ]
)}

optimizationLevelやqualityなどのプロパティの値を変更することで、圧縮率を設定できる。

ソースマップを有効にする

vite.config.ts

export default defineConfig({
  ...
  css : {
    devSourcemap: true
  }
)}

サブディレクトリにビルドする場合

vite.config.ts

import { defineConfig } from 'vite'

export default defineConfig({
  ...
  base: './'
)}

// もしくは、明示的にも指定可能
export default defineConfig({
  ...
  // /aboutにデプロイする場合
  base: '/about',
})

---

小さい規模のプロジェクトであれば、上記の設定だけで十分対応できる。