【笔记】Vite学习笔记

发表于 更新于 阅读次数：

前言

Vite是一个由尤雨溪编写的本地开发服务器。它被默认用于Vue和React的项目模板，支持TypeScript与JSX并在内部使用Rolldown进行打包构建。（维基百科）

下载依赖

1
npm install -D vite

基本命令

启动服务器

1
vite

打包

1
vite build

打包并预览

1
vite preview

创建项目

1
npm create vite

配置文件

vite.config.js
1
2
3
4
5
import { defineConfig } from "vite";

export default defineConfig({
  plugins: []
});
  • 简写
vite.config.js
1
2
3
export default {
  plugins: []
};

打包JS文件

  • 直接引入JS文件
1
import "<js_file_name>";

打包CSS文件

  • 直接引入CSS文件
1
import "<css_file_name>";

通过PostCSS转换CSS文件

下载依赖

1
npm install -D postcss postcss-preset-env

打包Less文件

下载依赖

1
npm install -D less

引入Less

1
import "<less_file_name>";

打包Vue文件

Vue2

下载依赖

1
npm install -D underfin/vue-plugin-vue2

修改配置文件

vite.config.js
1
2
3
4
5
6
7
8
import { defineConfig } from "vite";
import vue from "underfin/vue-plugin-vue2";

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

Vue3

下载依赖

1
npm install -D @vitejs/plugin-vue

修改配置文件

vite.config.js
1
2
3
4
5
6
7
8
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

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

Vue3 JSX

下载依赖

1
npm install -D @vitejs/plugin-vue-jsx

修改配置文件

vite.config.js
1
2
3
4
5
6
7
8
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue-jsx";

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

完成