vite項目vite.config.js詳細配置
Vue3+vite
vite和webpack區(qū)別？
1.vite服務(wù)器啟動速度比webpack快，由于vite啟動的時候不需要打包，也就無需分析模塊依賴、編譯，所以啟動速度非?？?。當瀏覽器請求需要的模塊時，再對模塊進行編譯，這種按需動態(tài)編譯的模式，極大縮短了編譯時間，當項目越大，文件越多時，vite的開發(fā)時優(yōu)勢越明顯。vite熱更新比webpack快，vite在HRM方面，當某個模塊內(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默認從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 {
... //各項配置
}
}
);當以命令方式運行 vite 時，vite 會自動解析項目根目錄下 vite.config.js 的文件。配置不全時，在開發(fā)環(huán)境下運行都是正常的，但是打包上線的時候就會出現(xiàn)各種問題。如：
1.假設(shè)不配置 base 時，打包之后，訪問時出現(xiàn)白屏。
2.alias 不配置的時候，每次引入文件需要找根目錄，比較麻煩。
以下是 vite.config.js 的更多常用參數(shù)配置以及意義：
//詳細版
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/。不填默認就是/
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è)置訪問目標地址允許跨域
rewrite: (p) => p.replace(/^\/dev-api/, '')
},
'/prod-api': {
target: "https://xxxx.com/",
changeOrigin: true,///設(shè)置訪問目標地址允許跨域
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詳細配置的文章就介紹到這了,更多相關(guān)vite.config.js詳細配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3+element?Plus使用el-tabs標簽頁解決頁面刷新不回到默認頁的問題
這篇文章主要介紹了vue3+element?Plus使用el-tabs標簽頁頁面刷新不回到默認頁的操作方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue中關(guān)于@media媒體查詢的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue項目啟動提示Cannot GET /問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的漸進式框架。這篇文章主要介紹了Vue.js用法詳解,需要的朋友可以參考下2017-11-11
Webpack+Vue如何導(dǎo)入Jquery和Jquery的第三方插件
本文主要介紹了Webpack+Vue導(dǎo)入Jquery和Jquery的第三方插件的方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
Vue+echart?展示后端獲取的數(shù)據(jù)實現(xiàn)
本文主要介紹了Vue+echart?展示后端獲取的數(shù)據(jù)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2023-01-01
這篇文章主要給大家介紹了關(guān)于Vue3中watchEffect用途的相關(guān)資料, watch和watchEffect都是監(jiān)聽器,但在寫法和使用上有所區(qū)別,本文進行了詳細的介紹,需要的朋友可以參考下2021-07-07
vue使用$emit時,父組件無法監(jiān)聽到子組件的事件實例
下面小編就為大家分享一篇vue使用$emit時,父組件無法監(jiān)聽到子組件的事件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了Vue3實現(xiàn)圖片放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue打包后的線上部署Apache、nginx全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02