自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Vite 配置篇：日常開發(fā)掌握這些配置就夠了！

作者：前端阿飛V
開發(fā) 前端
Vite 配置整體來說和 Webpack 大同小異，只不過 Vite 更傻瓜式，把能做的基本都幫我們做好了。我們只用修改少量配置，甚至不用修改配置，就可以滿足日常開發(fā)的需求。

不知道有沒有這樣的兄弟，學習 Vite 的時候，官網上各種配置看的是眼花繚亂。不知道哪些需要掌握，哪些只用簡單了解一下。為了提高大家的效率，我把項目中常用的配置梳理了一下分享給大家，希望對你上手 Vite 有所幫助。話不多說，開干！

css.preprocessorOptions

傳遞給 CSS 預處理器的配置選項，這些配置會傳遞到預處理器的執(zhí)行參數中去。例如，在 scss 中定義一個全局變量：

// vite.config.js
import { defineConfig } from 'vite' // 使用 defineConfig 工具函數獲取類型提示：

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;` // 全局變量
      }
    }
  }
})

我們也可以定義一個全局變量文件，然后再引入這個文件：

// src/assets/styles/variables.scss
$injectedColor: orange;
$injectedFontSize: 16px;
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '/src/assets/styles/variables.scss';` // 引入全局變量文件
      }
    }
  }
})

這樣在 .scss 文件或 .vue 文件中就可以使用這些變量了。

css.postcss

PostCSS 也是用來處理 CSS 的，只不過它更像是一個工具箱，可以添加各種插件來處理 CSS 。像瀏覽器樣式兼容問題、瀏覽器適配等，都可以通過 PostCSS 來解決。

Vite 對 PostCSS 有良好的支持，我們只需要安裝相應的插件就可以了。如移動端使用 postcss-px-to-viewport 對不同設備進行布局適配：

npm install postcss-px-to-viewport -D
// vite.config.js
import { defineConfig } from 'vite'
import postcssPxToViewport from 'postcss-px-to-viewport'

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        // viewport 布局適配
        postcssPxToViewport({
          viewportWidth: 375
        })
      ]
    }
  }
})

這樣我們書寫的 px 單位就會轉為 vw 或 vh ，很輕松地解決了適配問題。

resolve.alias

定義路徑別名也是我們常用的一個功能，我們通常會給 scr 定義一個路徑別名：

// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src') // 路徑別名
    }
  }
})

我們也可以使用插件，來自動給 src 和 src 下所有的文件夾定義路徑別名：

// vite.config.js
import { defineConfig } from 'vite'
import { ViteAliases } from './node_modules/vite-aliases' // 通過名稱引入會報錯，可能是插件問題

export default defineConfig({
  plugins: [
    ViteAliases()
  ]
})

相應的路徑別名如下：

src -> @
  assets -> @assets
  components -> @components
  router -> @router
  stores -> @stores
  views -> @views
  ...

resolve.extensions

導入時想要省略的擴展名列表。默認值為 ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'] 。

// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    extensions: ['.js', '.ts', '.json'] // 導入時想要省略的擴展名列表
  }
})

注意：不建議忽略自定義導入類型的擴展名（例如：.vue），因為它會影響 IDE 和類型支持。

optimizeDeps.force

是否開啟強制依賴預構建。node_modules 中的依賴模塊構建過一次就會緩存在 node_modules/.vite/deps 文件夾下，下一次會直接使用緩存的文件。而有時候我們想要修改依賴模塊的代碼，做一些測試或者打個補丁，這時候就要用到強制依賴預構建。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    force: true // 強制進行依賴預構建
  },
})

除了這個方法，我們還可以通過刪除 .vite 文件夾或運行 npx vite --force 來強制進行依賴預構建。

server.host

指定服務器監(jiān)聽哪個 IP 地址。默認值為 localhost ，只會監(jiān)聽本地的 127.0.0.1 。當我們開發(fā)移動端項目時，需要在手機瀏覽器上訪問當前項目。這時候可以將 host 設置為 true 或 0.0.0.0 ，這樣服務器就會監(jiān)聽所有地址，包括局域網和公網地址。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    host: true // 監(jiān)聽所有地址
  }
})

效果如下：

當手機和電腦處于同一個網絡環(huán)境下，我們就可以通過下面那個地址進行訪問了。

server.proxy

反向代理也是我們經常會用到的一個功能，通常我們使用它來進行跨域：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      // 字符串簡寫寫法
      '/foo': 'http://localhost:4567',
      // 選項寫法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正則表達式寫法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      },
      // 使用 proxy 實例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的實例
        }
      },
      // Proxying websockets or socket.io
      '/socket.io': {
        target: 'ws://localhost:3000',
        ws: true
      }
    }
  }
})

base

開發(fā)或生產環(huán)境服務的公共基礎路徑?？梢允且韵聨追N值：

  • 絕對 URL 路徑，例如 /foo/。
  • 完整的 URL，例如 https://foo.com/?。
  • 空字符串或 ./（用于嵌入形式的開發(fā)）。
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  base: '/foo/' // 開發(fā)或生產環(huán)境服務的公共基礎路徑
})

build.outdir

指定打包文件的輸出目錄。默認值為 dist ，當 dist 被占用或公司有統(tǒng)一命名規(guī)范時，可進行調整。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    outDir: 'build' // 打包文件的輸出目錄
  }
})

build.assetsDir

指定生成靜態(tài)資源的存放目錄。默認值為 assets ，可根據需要進行調整。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    assetsDir: 'static' // 靜態(tài)資源的存放目錄
  }
})

build.assetsInlineLimit

圖片轉 base64 編碼的閾值。為防止過多的 http 請求，Vite 會將小于此閾值的圖片轉為 base64 格式，可根據實際需求進行調整。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    assetsInlineLimit: 4096 // 圖片轉 base64 編碼的閾值
  }
})

plugins

插件相信大家都不陌生了。我們可以使用官方插件，也可以社區(qū)插件。如使用 @vitejs/plugin-vue 提供 Vue3 單文件組件的支持，使用 vite-plugin-mock 讓我們更輕松地 mock 數據。

npm i mockjs -S
npm i vite-plugin-mock -D
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

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

更多社區(qū)插件，大家可以查看 awesome-vite 。當然如果有特殊需求，我們也可以自己寫一個插件。后續(xù)我也會帶大家手寫一個自己的插件。

完整代碼

// vite.config.js
import { defineConfig } from 'vite' // 使用 defineConfig 工具函數獲取類型提示：
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  base: '/foo/', // 開發(fā)或生產環(huán)境服務的公共基礎路徑
  optimizeDeps: {
    force: true // 強制進行依賴預構建
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '/src/assets/styles/variables.scss';` // 引入全局變量文件
      }
    },
    postcss: {
      plugins: [
        // viewport 布局適配
        postcssPxToViewport({
          viewportWidth: 375
        })
      ]
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src') // 路徑別名
    },
    extensions: ['.js', '.ts', '.json'] // 導入時想要省略的擴展名列表
  },
  server: {
    host: true, // 監(jiān)聽所有地址
    proxy: {
      // 字符串簡寫寫法
      '/foo': 'http://localhost:4567',
      // 選項寫法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正則表達式寫法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      },
      // 使用 proxy 實例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的實例
        }
      },
      // Proxying websockets or socket.io
      '/socket.io': {
        target: 'ws://localhost:3000',
        ws: true
      }
    }
  },
  build: {
    outDir: 'build', // 打包文件的輸出目錄
    assetsDir: 'static', // 靜態(tài)資源的存放目錄
    assetsInlineLimit: 4096 // 圖片轉 base64 編碼的閾值
  },
  plugins: [
    vue(),
    viteMockServe()
  ]
})

小結

其實日常開發(fā)掌握這些配置就足夠了，如果遇到特殊的場景我們再去查文檔就可以，而不需要一開始就把所有配置都學習一遍。Vite 配置整體來說和 Webpack 大同小異，只不過 Vite 更傻瓜式，把能做的基本都幫我們做好了。我們只用修改少量配置，甚至不用修改配置，就可以滿足日常開發(fā)的需求。

責任編輯：姜華 來源： 今日頭條
ViteWebpack
相關推薦

2019-09-09 14:13:31

電商數據分析指標

2023-11-07 07:46:02

GatewayKubernetes

2022-12-20 09:09:27

ViteWebpack

2022-06-26 09:56:50

HttpUtil工具類模式

2021-10-21 06:52:17

ZooKeeper分布式配置

2017-09-06 12:42:45

AndroidGradle開發(fā)技巧

2024-08-02 17:19:36

2017-01-10 19:06:39

Android日常開發(fā)技術經驗

2021-08-03 15:26:56

代碼智能阿里云

2020-08-03 10:00:11

前端登錄服務器

2023-04-24 08:00:00

ES集群容器

2025-01-15 09:00:20

2023-05-17 08:34:27

開發(fā)技術應用

2015-10-10 10:10:20

2021-01-18 11:41:22

SQL數據庫編程語言

2020-05-14 16:35:21

Kubernetes網絡策略DNS

2022-06-20 09:01:23

Git插件項目

2023-02-10 09:04:27

2020-02-18 16:20:03

Redis ANSI C語言日志型

2020-10-23 07:43:37

Log配置性能
點贊
收藏

51CTO技術棧公眾號