💓 博客主页:瑕疵的CSDN主页
📝 Gitee主页:瑕疵的gitee主页
⏩ 文章专栏:《热点资讯》
使用Vite构建现代化前端应用
- 引言
- Vite 简介
- 安装 Vite
- 创建项目
- 启动开发服务器
- 项目结构
- 配置 Vite
- 开发模式
- 生产构建
- 使用插件
- 高级配置
- 环境变量
- 代理配置
- 实际案例
- 总结
- 快速冷启动:利用原生 ES 模块导入,Vite 可以在几秒钟内启动开发服务器。
- 即时热更新:通过 HMR(Hot Module Replacement),Vite 可以在保存文件时立即更新页面,无需刷新浏览器。
- 按需编译:Vite 在开发模式下按需编译模块,提高了开发效率。
- 生产构建:Vite 提供了优化的生产构建,支持 Tree Shaking、代码分割等。
npm install -g create-vite
使用 Vite 创建一个新的项目非常简单。运行以下命令选择一个模板:
create-vite my-app
进入项目目录并安装依赖:
cd my-app
npm install
启动开发服务器:
npm run dev
打开浏览器访问 http://localhost:3000
,你将看到 Vite 的欢迎页面。
my-app/
├── node_modules/
├── public/
│ └── favicon.ico
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.vue
│ └── main.js
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md
Vite 的配置文件是
vite.config.js
,可以在这里进行各种配置。以下是一个基本的配置示例:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],server: {port: 3000,open: true},build: {outDir: 'dist',assetsDir: 'assets',rollupOptions: {input: 'src/main.js'}}
});
在开发模式下,Vite 提供了快速的冷启动和即时热更新功能。每次保存文件时,Vite 会立即更新页面,无需刷新浏览器。
构建生产版本的命令如下:
npm run build
构建完成后,生成的文件将位于 dist
目录中。你可以将这些文件部署到任何静态文件服务器上。
@vitejs/plugin-vue
插件以支持 Vue 3:
npm install @vitejs/plugin-vue
然后在 vite.config.js
中配置插件:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()]
});
Vite 支持环境变量,可以在
.env
文件中定义环境变量。例如,创建一个
.env
文件:
VITE_APP_TITLE=My App
VITE_API_URL=https://api.example.com
在代码中使用环境变量:
console.log(import.meta.env.VITE_APP_TITLE); // My App
console.log(import.meta.env.VITE_API_URL); // https://api.example.com
在开发模式下,可以使用代理配置来解决跨域问题。在
vite.config.js
中配置代理:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],server: {proxy: {'/api': {target: 'https://api.example.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
});
Vite 已经被广泛应用于各种场景,例如:
- 单页应用(SPA):构建响应迅速的单页应用。
- 多页应用(MPA):构建多个独立页面的应用。
- 库开发:开发和发布前端库。
Vite 支持丰富的插件生态和高级配置选项,可以满足各种复杂需求。