vue如何实现配置vite
更新时间：2025年12月16日 09:53:15 作者：天河-
本文介绍了在Vue项目中配置Vite的步骤和常见配置项,包括开发服务器配置、路径别名配置、构建配置、CSS配置、环境变量配置及扩展插件的使用,通过这些配置,可以提升Vue项目的开发体验和构建效率
在 Vue 项目中配置 Vite 是一个常见的开发场景，Vite 作为新一代构建工具，能显著提升 Vue 项目的开发体验。
以下是配置步骤和常见配置项：
1. 创建 Vue + Vite 项目
首先确保你已安装 Node.js (v14.18+)，然后通过官方命令创建项目：
# npm npm create vite@latest my-vue-app -- --template vue # yarn yarn create vite my-vue-app --template vue # pnpm pnpm create vite my-vue-app -- --template vue
进入项目并安装依赖：
cd my-vue-app npm install
2. Vite 配置文件
项目根目录下的 vite.config.js 是 Vite 的核心配置文件，基础结构如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()], // 引入 Vue 插件
})
Vue 项目的 Vite 基础配置
3. 常用配置项
3.1 开发服务器配置
运行
export default defineConfig({
plugins: [vue()],
server: {
port: 3000, // 开发服务器端口
open: true, // 自动打开浏览器
proxy: {
// 代理配置，解决跨域问题
'/api': {
target: 'http://localhost:8080', // 后端接口地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
3.2 路径别名配置
运行
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
// 路径别名
alias: {
'@': path.resolve(__dirname, './src'),
'components': path.resolve(__dirname, './src/components')
}
}
})
使用别名时，需要在 tsconfig.json 或 jsconfig.json 中同步配置（如果使用 TypeScript）：
{
"compilerOptions": {
"paths": {
"@/*": ["src/*"]
}
}
}
3.3 构建配置
运行
export default defineConfig({
plugins: [vue()],
build: {
outDir: 'dist', // 输出目录
assetsDir: 'assets', // 静态资源目录
minify: 'terser', // 压缩方式
sourcemap: false, // 是否生成 sourcemap
rollupOptions: {
// 自定义 Rollup 配置
output: {
// 静态资源分类打包
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
}
}
}
})
3.4 CSS 配置
运行
export default defineConfig({
plugins: [vue()],
css: {
preprocessorOptions: {
// SCSS 配置
scss: {
additionalData: `@import "@/styles/variables.scss";`
},
// Less 配置
less: {
modifyVars: {
'primary-color': '#1890ff'
}
}
}
}
})
4. 环境变量配置
Vite 支持 .env 文件配置环境变量：
.env：通用环境变量.env.development：开发环境变量.env.production：生产环境变量
变量需要以 VITE_ 为前缀才能被客户端访问：
env
# .env.development VITE_API_BASE_URL = 'http://localhost:3000/api'
在代码中使用：
运行
console.log(import.meta.env.VITE_API_BASE_URL)
5. 扩展插件
可以通过安装额外插件增强 Vite 功能：
@vitejs/plugin-vue-jsx：支持 Vue JSXvite-plugin-vue-setup-extend：允许在<script setup>中设置组件名vite-plugin-compression：构建时压缩静态资源
安装并配置插件：
npm install @vitejs/plugin-vue-jsx -D
运行
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
plugins: [vue(), vueJsx()]
})
通过以上配置，你可以根据项目需求定制 Vite 的行为，优化 Vue 项目的开发和构建流程。更多配置细节可参考 Vite 官方文档。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了详解vue2 $watch要注意的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家介绍了Composition Api封装业务hook的思路示例分享，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue 源码目录及构建过程分析，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
Vue3中createWebHistory和createWebHashHistory的区别详析
这篇文章主要给大家介绍了关于Vue3中createWebHistory和createWebHashHistory区别的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-06-06
使用Vue.js报错：ReferenceError: “Vue is not d
在前端开发中,ReferenceError: "Vue is not defined" 是一个常见的错误,该错误通常发生在项目中未正确引入 Vue.js 框架或代码配置存在问题时,本篇文章将详细分析该错误的成因,并提供多种解决方案,帮助开发者快速排查问题,需要的朋友可以参考下2024-12-12
在前端开发中,表单是非常常见的交互元素,然而,当表单的结构和字段需要根据不同的业务场景动态变化时,手动编写每个表单的代码会变得非常繁琐,所以我们可以使用Vue实现一个动态表单生成器,本文将详细介绍实现动态表单生成器的原理,需要的朋友可以参考下2025-04-04
热更新全称Hot Module Reload,常常在构建工具里面出现,下面这篇文章主要介绍了Vue Vite热更新不起作用的正确解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要为大家介绍了vue之数据代理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了vue 页面跳转的实现方式，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2021-01-01
这篇文章主要介绍了vue 使用 canvas 实现手写电子签名功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
最新评论