首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue如何配置vite

vue如何实现配置vite

2025-12-16 09:53:16 作者：天河-

本文介绍了在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 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 官方文档。

总结

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