vite简单介绍和配置整理
一. 介绍
Vite(法语,快的意思)是一个HTTP服务器,特殊的地方:
- 可以在单文件中书写ES6语法
- 支持热更新(请求的内容才会被打包/更新)
- 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,
}
}
}
})