vite简单介绍和配置整理

vite简单介绍和配置整理

一. 介绍

Vite(法语，快的意思)是一个HTTP服务器，特殊的地方：

1. 可以在单文件中书写ES6语法
2. 支持热更新（请求的内容才会被打包/更新）
3. Rollup打包

二. 配置

总的配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'
import viteCompression from 'vite-plugin-compression'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      vue(),
      viteCompression({
        deleteOriginFile: false,
        algorithm: "gzip",
        ext: '.gz',
      })
  ],
  resolve: {
    alias: {
      '@' : fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  base: './',
  //关键代码
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      }
    }
  }
})

1. 配置路径别名

配置路径别名后，就可以使用@开头访问项目配置的路径

import { fileURLToPath, URL } from 'node:url'
export default defineConfig({
  plugins: [...],
  resolve: {
    alias: {
      '@' : fileURLToPath(new URL('./src', import.meta.url))
    }
  },
...

2. 开启gzip压缩

vite项目build的时候，对于稍大的文件都会显示gzip后的体积，使用gzip压缩可以大大减少压缩后的体积

1. npm 下载安装 vite-plugin-compression
 npm i vite-plugin-compression -D
2. 配置vite.config.js
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  plugins: [
      vue(),
      viteCompression({
        deleteOriginFile: false,
        algorithm: "gzip",
        ext: '.gz',
      })
  ],
    ...

3. 配置打包路径

配置之后，build之后的项目的一些静态资源的访问不会出现404的情况

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
...
  ],
  resolve: {
...
  },
  base: './',
      ...

4. 安装配置less

npm i less-loader less --save-dev

// https://vitejs.dev/config/
export default defineConfig({
...
  css: {
    // // css预处理器
    // preprocessorOptions: {
    //   less: {
    //     charset: false,
    //     additionalData: '@import "./src/styles/index.less";',
    //   },
    // },
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      }
    }
  }
})