Vue.js: إعدادات Vite

# Webpack Project Cold Start
$ npm run dev
> Project is running at http://localhost:8080
> Compiled successfully in 28.5s ← Waited 30s

# Vite Project Cold Start
$ npm run dev
> VITE v5.4.0 ready in 487 ms ← Only 0.5s
> Local: http://localhost:5173/

Development Mode(dev):
 - Using native ESM,Directly in the browser import
 - Compile on Demand(Compiled only on the first visit to the page)
 - HMR Extremely fast(Update only the modules that have been modified)

Production Model(build):
 - Use Rollup Packaging
 - Automatic tree-shaking / Code Break / Compression
 - Output to dist/ Table of Contents

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
 // Project Root Directory(Default process.cwd())
 root: '.',
 
 // Basic Public Paths
 base: '/',
 
 // Plugins
 plugins: [vue()],
 
 // Server Configuration
 server: {
 port: 5173,
 open: true, // Open the browser automatically
 host: '0.0.0.0' // Accessible on the local area network
 },
 
 // Build Configuration
 build: {
 outDir: 'dist',
 sourcemap: false,
 minify: 'esbuild'
 },
 
 // CSS Layout
 css: {
 preprocessorOptions: {
 scss: {
 additionalData: `@import "@/styles/variables.scss";`
 }
 }
 },
 
 // Path Aliases
 resolve: {
 alias: {
 '@': path.resolve(__dirname, 'src')
 }
 }
})

export default defineConfig({
 // 1. Path Aliases(Most Commonly Used)
 resolve: {
 alias: {
 '@': path.resolve(__dirname, 'src'),
 '@components': path.resolve(__dirname, 'src/components'),
 '@stores': path.resolve(__dirname, 'src/stores')
 }
 },
 
 // 2. Server Configuration
 server: {
 port: 5173,
 open: true,
 host: '0.0.0.0',
 proxy: {
 '/api': {
 target: 'http://localhost:3000',
 changeOrigin: true
 }
 }
 },
 
 // 3. CSS Preprocessor
 css: {
 preprocessorOptions: {
 scss: { /* ... */ },
 less: { /* ... */ }
 }
 },
 
 // 4. Build Optimization
 build: {
 rollupOptions: {
 output: {
 manualChunks: {
 'vue-vendor': ['vue', 'vue-router', 'pinia']
 }
 }
 },
 chunkSizeWarningLimit: 1500
 },
 
 // 5. Optimization Options
 optimizeDeps: {
 include: ['vue', 'vue-router', 'pinia']
 }
})

# .env.development
VITE_API_BASE_URL=http://localhost:3000
VITE_APP_TITLE=My App (Dev)

# .env.production
VITE_API_BASE_URL=https://api.example.com
VITE_APP_TITLE=My App

# .env.local(git Ignore,Each developer's own)
VITE_API_KEY=secret-key

// src/env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
 readonly VITE_API_BASE_URL: string
 readonly VITE_APP_TITLE: string
 readonly VITE_API_KEY?: string
}

interface ImportMeta {
 readonly env: ImportMetaEnv
}

const apiUrl = import.meta.env.VITE_API_BASE_URL
const title = import.meta.env.VITE_APP_TITLE

npm install -D sass

// src/styles/variables.scss
$primary: #42b883;
$danger: #ef4444;
$font-size-base: 14px;
$border-radius: 4px;

// vite.config.ts
css: {
 preprocessorOptions: {
 scss: {
 // Automatically import into each .scss Documents
 additionalData: `@import "@/styles/variables.scss";`
 }
 }
}

// Any .scss You can use them directly in the document
.button {
 background: $primary; /* Not required @import */
 color: white;
 border-radius: $border-radius;
}

npm install -D unplugin-auto-import

// vite.config.ts
import AutoImport from 'unplugin-auto-import'

export default defineConfig({
 plugins: [
 vue(),
 AutoImport({
 imports: ['vue', 'vue-router', 'pinia'],
 dts: 'src/auto-imports.d.ts', // Type Definitions
 eslintrc: {
 enabled: true // Generate .eslintrc-auto-import.json
 }
 })
 ]
})

<script setup>
// ✅ No longer needed import ref / computed / watch
const count = ref(0)
const double = computed(() => count.value * 2)
watch(count, (val) => console.log(val))

// ✅ No longer needed useRouter
const router = useRouter()
</script>

// vite.config.ts
build: {
 rollupOptions: {
 output: {
 manualChunks: {
 'vue-vendor': ['vue', 'vue-router', 'pinia'],
 'echarts-vendor': ['echarts', 'vue-echarts'],
 'utils': ['axios', 'dayjs']
 }
 }
 }
}

build: {
 rollupOptions: {
 treeshake: {
 moduleSideEffects: 'no-external', // Mark all modules as side-effect-free
 propertyReadSideEffects: false // Reading tag attributes has no side effects
 }
 }
}

build: {
 cssMinify: 'lightningcss', // 10x faster than esbuild
 // or 'esbuild' (Default)
}

build: {
 assetsInlineLimit: 4096, // < 4KB Resources inline(base64)
 rollupOptions: {
 output: {
 assetFileNames: 'assets/[name]-[hash][extname]',
 chunkFileNames: 'js/[name]-[hash].js',
 entryFileNames: 'js/[name]-[hash].js'
 }
 }
}

build: {
 sourcemap: true, // Generated in the production environment as well(Used for Sentry)
 rollupOptions: {
 output: {
 sourcemapExcludeSources: true // Not including the source code inline into map
 }
 }
}

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import'
import path from 'path'

export default defineConfig({
 plugins: [
 vue(),
 AutoImport({
 imports: ['vue', 'vue-router', 'pinia'],
 dts: 'src/auto-imports.d.ts'
 })
 ],
 
 resolve: {
 alias: {
 '@': path.resolve(__dirname, 'src')
 }
 },
 
 server: {
 port: 5173,
 open: true,
 proxy: {
 '/api': {
 target: 'http://localhost:3000',
 changeOrigin: true
 }
 }
 },
 
 css: {
 preprocessorOptions: {
 scss: {
 additionalData: `@import "@/styles/variables.scss";`
 }
 }
 },
 
 build: {
 outDir: 'dist',
 sourcemap: true,
 rollupOptions: {
 output: {
 manualChunks: {
 'vue-vendor': ['vue', 'vue-router', 'pinia']
 }
 }
 }
 }
})

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

# .env.production
VITE_API_BASE_URL=https://api.example.com

# .env.local
VITE_API_KEY=secret

// src/env.d.ts
interface ImportMetaEnv {
 readonly VITE_API_BASE_URL: string
 readonly VITE_API_KEY?: string
}
interface ImportMeta {
 readonly env: ImportMetaEnv
}

// Usage
const apiUrl = import.meta.env.VITE_API_BASE_URL