快捷導(dǎo)航

vue如何實(shí)現(xiàn)配置vite

更新時(shí)間：2025年12月16日 09:53:15 作者：天河-

本文介紹了在Vue項(xiàng)目中配置Vite的步驟和常見配置項(xiàng),包括開發(fā)服務(wù)器配置、路徑別名配置、構(gòu)建配置、CSS配置、環(huán)境變量配置及擴(kuò)展插件的使用,通過這些配置,可以提升Vue項(xiàng)目的開發(fā)體驗(yàn)和構(gòu)建效率

1. 創(chuàng)建 Vue + Vite 項(xiàng)目

首先確保你已安裝 Node.js (v14.18+)，然后通過官方命令創(chuàng)建項(xiàng)目：

# 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

進(jìn)入項(xiàng)目并安裝依賴：

cd my-vue-app
npm install

2. Vite 配置文件

項(xiàng)目根目錄下的 vite.config.js 是 Vite 的核心配置文件，基礎(chǔ)結(jié)構(gòu)如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()], // 引入 Vue 插件
})

Vue 項(xiàng)目的 Vite 基礎(chǔ)配置

3. 常用配置項(xiàng)

3.1 開發(fā)服務(wù)器配置

運(yùn)行

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000, // 開發(fā)服務(wù)器端口
    open: true, // 自動(dòng)打開瀏覽器
    proxy: {
      // 代理配置，解決跨域問題
      '/api': {
        target: 'http://localhost:8080', // 后端接口地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

3.2 路徑別名配置

運(yùn)行

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')
    }
  }
})

使用別名時(shí)，需要在 tsconfig.json 或 jsconfig.json 中同步配置（如果使用 TypeScript）：

{
  "compilerOptions": {
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

3.3 構(gòu)建配置

運(yùn)行

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist', // 輸出目錄
    assetsDir: 'assets', // 靜態(tài)資源目錄
    minify: 'terser', // 壓縮方式
    sourcemap: false, // 是否生成 sourcemap
    rollupOptions: {
      // 自定義 Rollup 配置
      output: {
        // 靜態(tài)資源分類打包
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
      }
    }
  }
})

3.4 CSS 配置

運(yùn)行

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      // SCSS 配置
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      },
      // Less 配置
      less: {
        modifyVars: {
          'primary-color': '#1890ff'
        }
      }
    }
  }
})

4. 環(huán)境變量配置

Vite 支持 .env 文件配置環(huán)境變量：

.env：通用環(huán)境變量
.env.development：開發(fā)環(huán)境變量
.env.production：生產(chǎn)環(huán)境變量

變量需要以 VITE_ 為前綴才能被客戶端訪問：

env

# .env.development
VITE_API_BASE_URL = 'http://localhost:3000/api'

在代碼中使用：

運(yùn)行

console.log(import.meta.env.VITE_API_BASE_URL)

5. 擴(kuò)展插件

可以通過安裝額外插件增強(qiáng) Vite 功能：

@vitejs/plugin-vue-jsx：支持 Vue JSX
vite-plugin-vue-setup-extend：允許在 <script setup> 中設(shè)置組件名
vite-plugin-compression：構(gòu)建時(shí)壓縮靜態(tài)資源

安裝并配置插件：

npm install @vitejs/plugin-vue-jsx -D

運(yùn)行

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [vue(), vueJsx()]
})

通過以上配置，你可以根據(jù)項(xiàng)目需求定制 Vite 的行為，優(yōu)化 Vue 項(xiàng)目的開發(fā)和構(gòu)建流程。更多配置細(xì)節(jié)可參考 Vite 官方文檔。