前端技术分享
0%

【635】Vite 快速构建

发表于 分类于

Vite 是什么？

Vite 是快速前端构建工具，基于 ES modules。

创建项目

1
npm create vite@latest my-app

开发服务器

1
2
3
4
5
6
7
8
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: 3000
  }
})

构建配置

1
2
3
4
5
6
export default defineConfig({
  build: {
    outDir: 'dist',
    minify: 'terser'
  }
})

插件

1
2
3
4
5
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

CSS 预处理

1
2
3
4
5
6
7
8
9
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "src/styles/variables.scss";`
      }
    }
  }
})

环境变量

1
2
3
4
5
// .env
VITE_API_URL=https://api.example.com

// 使用
console.log(import.meta.env.VITE_API_URL)

总结

Vite 开发体验优秀。快如闪电的热重载。