使用Vite构建现代化前端应用
💓 博客主页：瑕疵的CSDN主页
📝 Gitee主页：瑕疵的gitee主页
⏩ 文章专栏：《热点资讯》
使用Vite构建现代化前端应用
- 引言
- Vite 简介
- 安装 Vite
- 创建项目
- 启动开发服务器
- 项目结构
- 配置 Vite
- 使用 Vue 组件
- 构建生产环境
- 部署到 GitHub Pages
- 高级配置
- 环境变量
- 代理配置
- 总结
- 快速冷启动：Vite 利用了浏览器原生的 ES 模块导入功能，无需打包即可启动开发服务器。
- 即时热更新：Vite 提供了更快的热更新体验，修改文件后几乎可以立即看到效果。
- 按需编译：Vite 只在需要时编译模块，而不是一次性打包整个应用。
- 丰富的插件生态：Vite 拥有丰富的插件生态系统，可以轻松集成各种功能。
npm install -g create-vite
create-vite my-vite-app
进入项目目录并安装依赖：
cd my-vite-app
npm install
npm run dev
打开浏览器，访问 http://localhost:5000，你应该能够看到 Vite 的欢迎页面。
my-vite-app/
├── node_modules/
├── public/
│ └── favicon.ico
├── src/
│ ├── assets/
│ │ └── logo.png
│ ├── components/
│ │ └── HelloWorld.vue
│ ├── App.vue
│ └── main.js
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md
vite.config.js，你可以在这个文件中进行各种配置。以下是一个基本的配置示例：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
port: 5000,
open: true
},
build: {
outDir: 'dist'
}
})
src/components 目录下创建一个 Vue 组件
HelloWorld.vue：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>
在 src/App.vue 中引入并使用这个组件：
<template>
<img alt="Vue logo" src="./assets/logo.png"/>
<HelloWorld msg="Welcome to Your Vite + Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
npm run build
构建完成后，会在 dist 目录下生成生产环境的文件。你可以将这些文件部署到任何静态文件服务器上。
vite-plugin-gh-pages 插件：
npm install vite-plugin-gh-pages --save-dev
然后，在 vite.config.js 中配置插件：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ghPages from 'vite-plugin-gh-pages'
export default defineConfig({
plugins: [vue(), ghPages()],
server: {
port: 5000,
open: true
},
build: {
outDir: 'dist'
}
})
最后，运行以下命令部署到 GitHub Pages：
npm run build && npm run deploy
.env 文件来定义环境变量。例如：
VITE_APP_TITLE=My Vite App
VITE_API_URL=https://api.example.com
在代码中，你可以通过 import.meta.env 访问这些环境变量：
console.log(import.meta.env.VITE_APP_TITLE);
console.log(import.meta.env.VITE_API_URL);
vite.config.js 中配置代理：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
port: 5000,
open: true,
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
build: {
outDir: 'dist'
}
})
Vite 提供了更快的冷启动速度和热更新能力，非常适合现代前端开发。
