vite項目vite.config.js詳細(xì)配置
Vue3+vite
vite和webpack區(qū)別？
1.vite服務(wù)器啟動速度比webpack快，由于vite啟動的時候不需要打包，也就無需分析模塊依賴、編譯，所以啟動速度非?？?。當(dāng)瀏覽器請求需要的模塊時，再對模塊進行編譯，這種按需動態(tài)編譯的模式，極大縮短了編譯時間，當(dāng)項目越大，文件越多時，vite的開發(fā)時優(yōu)勢越明顯。vite熱更新比webpack快，vite在HRM方面，當(dāng)某個模塊內(nèi)容改變時，讓瀏覽器去重新請求該模塊即可，而不是像webpack重新將該模塊的所有依賴重新編譯。
2.Vite的使用簡單，只需執(zhí)行初始化命令，就可以得到一個預(yù)設(shè)好的開發(fā)環(huán)境，開箱即獲得一堆功能，包括：CSS預(yù)處理、html預(yù)處理、異步加載、分包、壓縮、HMR等。使用復(fù)雜度介于Parcel和Webpack的中間，只是暴露了極少數(shù)的配置項和plugin接口，既不會像Parcel一樣配置不靈活，又不會像Webpack一樣需要了解龐大的loader、plugin生態(tài)，靈活適中、復(fù)雜度適中。
3.vite 是一個基于 Vue3 單文件組件的非打包開發(fā)服務(wù)器，它做到了本地快速開發(fā)啟動：
- 快速的冷啟動，不需要等待打包操作；
- 即時的熱模塊更新，替換性能和模塊數(shù)量的解耦讓更新飛起；
真正的按需編譯，不再等待整個應(yīng)用編譯完成，這是一個巨大的改變。
WebPack :
webpack是基于模塊化的打包(構(gòu)建)工具，通過一個入口文件遞歸出所有模塊的依賴關(guān)系，經(jīng)過一系列的過程（壓縮，合并），最終生成運行的代碼。
webpack的安裝：
通過npm install安裝 webpack ，webpack-cli
webpack:核心包，包含webpack構(gòu)建過程中要用到的所有api
webpack-cli:提供一個簡單的cli命令來調(diào)用webpack核心包的api，來完成構(gòu)建過程
安裝推薦使用本地安裝，webpack使每個項目都使用自己的webpack版本進行構(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 {
... //各項配置
}
}
);當(dāng)以命令方式運行 vite 時，vite 會自動解析項目根目錄下 vite.config.js 的文件。配置不全時，在開發(fā)環(huán)境下運行都是正常的，但是打包上線的時候就會出現(xiàn)各種問題。如：
1.假設(shè)不配置 base 時，打包之后，訪問時出現(xiàn)白屏。
2.alias 不配置的時候，每次引入文件需要找根目錄，比較麻煩。
以下是 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{
//項目部署在主域名的子文件使用,例如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']
},
//本地運行配置，以及反向代理配置
server: {
port: "9000",//端口
// host: "localhost",//ip地址例如192.168.1.177
host:true,
open: true,//服務(wù)啟動時自動在瀏覽器中打開應(yīng)用
// 反向代理配置
proxy: { //配置多個代理
'/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: [//擴展插件
{
postcssPlugin: 'internal:charset-removal',
AtRule: {//大寫AtRule
charset: (atRule) => {
//char set字符集
if (atRule.name === 'charset') {
atRule.remove();//刪除
}
}
}
}
]
},
},
}
})開發(fā)時，如果需要代理多個服務(wù)器，場景為后端接口分布在不同開發(fā)同事本機上，開發(fā)時通過選項寫法代理無縫對接多個服務(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 共享配置-擴展的插件 例子:
css: {
postcss: {
plugins: [px2rem(px2remOptions)]
}
}vite官網(wǎng):
https://cn.vitejs.dev/config/shared-options.html#css-postcss
擴展知識：
總結(jié)
到此這篇關(guān)于vite項目vite.config.js詳細(xì)配置的文章就介紹到這了,更多相關(guān)vite.config.js詳細(xì)配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了解決Vue_localStorage本地存儲和本地取值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
關(guān)于對keep-alive的理解,使用場景以及存在的問題解讀
這篇文章主要介紹了關(guān)于對keep-alive的理解,使用場景以及存在的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要給大家介紹了關(guān)于vue打包后修改配置后端IP地址、端口等信息的兩種方法,文中通過代碼示例以及圖文介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue打包具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
在Vue中嵌入第三方頁面可以采用多種方法,例如使用<iframe>、Vue插件、動態(tài)加載第三方腳本或WebComponents,不同方法適用于不同類型的內(nèi)容和項目需求,如<iframe>適用于整個網(wǎng)頁,而動態(tài)腳本和WebComponents適合特定功能,選擇合適的方法可以有效整合外部資源2024-09-09
這篇文章主要介紹了Vue中rules的寫法使用小結(jié),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
Vite是一個面向現(xiàn)代瀏覽器的一個更輕、更快的?Web?應(yīng)用開發(fā)工具,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3+Vite+TS快速搭建一套實用腳手架的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
這篇文章主要給大家介紹了關(guān)于vue上傳圖片文件的相關(guān)資料，介紹了利用原始input標(biāo)簽form表單上傳、elementui自帶的el-upload上傳以及elementui實現(xiàn)一次性上傳多張圖片等方法，需要的朋友可以參考下2021-05-05
vue?iview?導(dǎo)航高亮動態(tài)設(shè)置方式
這篇文章主要介紹了vue?iview?導(dǎo)航高亮動態(tài)設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
本文主要介紹了vue全局接入百度地圖的實現(xiàn)示例，文中根據(jù)實例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue2響應(yīng)式系統(tǒng)之set和delete
這篇文章主要介紹了Vue2響應(yīng)式系統(tǒng)之set和delete，通過為對象收集依賴，將對象、數(shù)組的修改、刪除也變成響應(yīng)式的了，同時為用戶提供了和方法，下文詳細(xì)介紹需要的朋友可以參考一下2022-04-04