vue如何实现配置vite

更新时间：2025年12月16日 09:53:15 作者：天河-

本文介绍了在Vue项目中配置Vite的步骤和常见配置项,包括开发服务器配置、路径别名配置、构建配置、CSS配置、环境变量配置及扩展插件的使用,通过这些配置,可以提升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 JSX
vite-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 官方文档。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue实现固定定位图标滑动隐藏效果
移动端页面，有时候会出现一些固定定位在底部图标，比如购物车等。这篇文章主要介绍了Vue制作固定定位图标滑动隐藏效果,需要的朋友可以参考下
2019-05-05
vue+element 实现商城主题开发的示例代码
这篇文章主要介绍了vue+element 实现商城主题开发的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
vue-element-admin如何设置默认语言
这篇文章主要介绍了vue-element-admin如何设置默认语言，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue上传文件formData入参为空,接口请求500的解决
这篇文章主要介绍了vue上传文件formData入参为空,接口请求500的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
vue如何使用笛卡尔积算法构建sku表格
这篇文章主要介绍了vue如何使用笛卡尔积算法构建sku表格问题，具有很好的价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
这篇文章主要介绍了解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
一文带你了解Vue3中toRef和toRefs的用法
Vue3中toRef、toRefs都是与响应式数据相关的，本文主要来给大家讲解一下Vue3中的toRef和toRefs的使用，感兴趣的朋友跟随小编一起看看吧
2023-01-01
深入理解vue.js中$watch的oldvalue与newValue
这篇文章主要给大家介绍了关于vue.js中$watch的oldvalue与newValue的相关资料，文中通过示例代码介绍的非常详细，并且介绍了关于watch的其他测试，对大家学习或者使用vue.js具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。
2017-08-08
vue3无config文件夹打包后页面空白问题及解决
这篇文章主要介绍了vue3无config文件夹打包后页面空白问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
解决vue项目使用font-awesome,build后路径的问题
今天小编就为大家分享一篇解决vue项目使用font-awesome,build后路径的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09