快捷導(dǎo)航

vite項(xiàng)目vite.config.js詳細(xì)配置

更新時(shí)間：2023年05月31日 10:55:47 作者：淺淺一笑^*^

vite.config.js是Vite框架中的配置文件,用于配置項(xiàng)目的構(gòu)建和運(yùn)行時(shí)的行為,下面這篇文章主要給大家介紹了關(guān)于vite項(xiàng)目vite.config.js詳細(xì)配置的相關(guān)資料,需要的朋友可以參考下

vite和webpack區(qū)別？

1.vite服務(wù)器啟動(dòng)速度比webpack快，由于vite啟動(dòng)的時(shí)候不需要打包，也就無需分析模塊依賴、編譯，所以啟動(dòng)速度非?？?。當(dāng)瀏覽器請(qǐng)求需要的模塊時(shí)，再對(duì)模塊進(jìn)行編譯，這種按需動(dòng)態(tài)編譯的模式，極大縮短了編譯時(shí)間，當(dāng)項(xiàng)目越大，文件越多時(shí)，vite的開發(fā)時(shí)優(yōu)勢(shì)越明顯。vite熱更新比webpack快，vite在HRM方面，當(dāng)某個(gè)模塊內(nèi)容改變時(shí)，讓瀏覽器去重新請(qǐng)求該模塊即可，而不是像webpack重新將該模塊的所有依賴重新編譯。

2.Vite的使用簡單，只需執(zhí)行初始化命令，就可以得到一個(gè)預(yù)設(shè)好的開發(fā)環(huán)境，開箱即獲得一堆功能，包括：CSS預(yù)處理、html預(yù)處理、異步加載、分包、壓縮、HMR等。使用復(fù)雜度介于Parcel和Webpack的中間，只是暴露了極少數(shù)的配置項(xiàng)和plugin接口，既不會(huì)像Parcel一樣配置不靈活，又不會(huì)像Webpack一樣需要了解龐大的loader、plugin生態(tài)，靈活適中、復(fù)雜度適中。

3.vite 是一個(gè)基于 Vue3 單文件組件的非打包開發(fā)服務(wù)器，它做到了本地快速開發(fā)啟動(dòng)：

快速的冷啟動(dòng)，不需要等待打包操作；
即時(shí)的熱模塊更新，替換性能和模塊數(shù)量的解耦讓更新飛起；

真正的按需編譯，不再等待整個(gè)應(yīng)用編譯完成，這是一個(gè)巨大的改變。

WebPack :

webpack是基于模塊化的打包(構(gòu)建)工具，通過一個(gè)入口文件遞歸出所有模塊的依賴關(guān)系，經(jīng)過一系列的過程（壓縮，合并），最終生成運(yùn)行的代碼。

webpack的安裝：

通過npm install安裝 webpack ，webpack-cli

webpack:核心包，包含webpack構(gòu)建過程中要用到的所有api

webpack-cli:提供一個(gè)簡單的cli命令來調(diào)用webpack核心包的api，來完成構(gòu)建過程

安裝推薦使用本地安裝，webpack使每個(gè)項(xiàng)目都使用自己的webpack版本進(jìn)行構(gòu)建。

npm install -D webpack webpack-cli

webpack使用：

webpack默認(rèn)從src文件夾下的index.js讀取入口文件，打包到dist文件夾下的的main.js中

設(shè)置開發(fā)環(huán)境和生成環(huán)境

"scripts": {
    "dev": "webpack --mode=development",
    "build":"webpack --mode=production"
  },

webpack兼容性：

webpack支持CommonJs和Es6模塊化的混合使用，也就是說你是commonJs導(dǎo)出的，可以es6導(dǎo)入。

es6導(dǎo)出，commonJs導(dǎo)入：

commonJs導(dǎo)出，es6導(dǎo)入

vite.config.js

//簡潔版
import { defineConfig } from 'vite';
export default defineConfig(({command,mode})=>{
    return {
      ... //各項(xiàng)配置
    }
  }
);

當(dāng)以命令方式運(yùn)行 vite 時(shí)，vite 會(huì)自動(dòng)解析項(xiàng)目根目錄下 vite.config.js 的文件。配置不全時(shí)，在開發(fā)環(huán)境下運(yùn)行都是正常的，但是打包上線的時(shí)候就會(huì)出現(xiàn)各種問題。如：

1.假設(shè)不配置 base 時(shí)，打包之后，訪問時(shí)出現(xiàn)白屏。

2.alias 不配置的時(shí)候，每次引入文件需要找根目錄，比較麻煩。

以下是 vite.config.js 的更多常用參數(shù)配置以及意義：

//詳細(xì)版
import { defineConfig, loadEnv } from 'vite' // 幫手函數(shù)，這樣不用 jsdoc 注解也可以獲取類型提示
import path from 'path'
import createVitePlugins from './vite/plugins'
// https://vitejs.dev/config/
export default  defineConfig(({command, mode })=>{
 // 獲取.env文件里定義的環(huán)境變量
const env = loadEnv(mode, process.cwd());
//console.log(env);   //變量在命令行里打印出來
//.env文件中的環(huán)境變量必須以VITE_為前綴，否則無法引用成功
const   {VITE_APP_ENV} = env
return{
 //項(xiàng)目部署在主域名的子文件使用,例如http://localhost:3000/myvite/。不填默認(rèn)就是/
 base: VITE_APP_ENV==='字段名' ? '/' : '/', // 例子:env.VITE_APP_BASE_URL || '/'
 plugins: createVitePlugins(env, command === 'build'),
 resolve: {
      alias: {
        //別名配置
        "~": path.resolve(__dirname, "./"), //配置的別名
        "@": path.resolve(__dirname, "./src"),
      },
      //共享配置 https://cn.vitejs.dev/config/shared-options.html#resolve-extensions
      extensions : ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json','.vue']
  },
 //本地運(yùn)行配置，以及反向代理配置
 server: {
   port: "9000",//端口
  // host: "localhost",//ip地址例如192.168.1.177
   host:true,
   open: true,//服務(wù)啟動(dòng)時(shí)自動(dòng)在瀏覽器中打開應(yīng)用
  // 反向代理配置
  proxy: { //配置多個(gè)代理
   '/dev-api': {
    target: "https://xxxx.com/",//例子:http://192.168.1.177:8080 或測試服務(wù)器https://xxxx.com
    changeOrigin: true,///設(shè)置訪問目標(biāo)地址允許跨域
    rewrite: (p) => p.replace(/^\/dev-api/, '')
   },
   '/prod-api': {
    target: "https://xxxx.com/",
    changeOrigin: true,///設(shè)置訪問目標(biāo)地址允許跨域
    rewrite: (p) => p.replace(/^\/prod-api/, '')
   },
  }
 },
 css: {
  // postCss 共享配置
  postcss: {
     plugins: [//擴(kuò)展插件
          {
            postcssPlugin: 'internal:charset-removal',
            AtRule: {//大寫AtRule
              charset: (atRule) => {
              //char set字符集
                if (atRule.name === 'charset') {
                  atRule.remove();//刪除
                }
              }
            }
          }
      ]
  },
 },
 }
})

開發(fā)時(shí)，如果需要代理多個(gè)服務(wù)器，場景為后端接口分布在不同開發(fā)同事本機(jī)上，開發(fā)時(shí)通過選項(xiàng)寫法代理無縫對(duì)接多個(gè)服務(wù)器。

// vite.config.ts 代理配置
    proxy: { // 代理配置
     '/user': {
     target: 'https://www.baidu.com',
     changeOrigin: true,
     rewrite: (path) => path.replace(/^\/user/, '')
     },
     '/cus': {
     target: 'https://www.taobao.com',
     changeOrigin: true,
     rewrite: (path) => path.replace(/^\/cus/, '')
     }
     },

//css 共享配置-擴(kuò)展的插件  例子:
        css: {
            postcss: {
                plugins: [px2rem(px2remOptions)]
            }
        }

vite官網(wǎng):

https://cn.vitejs.dev/config/shared-options.html#css-postcss

擴(kuò)展知識(shí)：

總結(jié)

到此這篇關(guān)于vite項(xiàng)目vite.config.js詳細(xì)配置的文章就介紹到這了,更多相關(guān)vite.config.js詳細(xì)配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: