欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vite項目vite.config.js詳細配置

 更新時間：2023年05月31日 10:55:47   作者：淺淺一笑^*^  
vite.config.js是Vite框架中的配置文件,用于配置項目的構建和運行時的行為,下面這篇文章主要給大家介紹了關于vite項目vite.config.js詳細配置的相關資料,需要的朋友可以參考下

Vue3+vite

vite和webpack區(qū)別？

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

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

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

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

真正的按需編譯，不再等待整個應用編譯完成，這是一個巨大的改變。

WebPack :

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

webpack的安裝：

通過npm install安裝 webpack ，webpack-cli

webpack:核心包，包含webpack構建過程中要用到的所有api

webpack-cli:提供一個簡單的cli命令來調用webpack核心包的api，來完成構建過程

安裝推薦使用本地安裝，webpack使每個項目都使用自己的webpack版本進行構建。

npm install -D webpack webpack-cli

webpack使用：

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

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

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

webpack兼容性：

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

es6導出 ，commonJs導入：

commonJs導出，es6導入

vite.config.js

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

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

1.假設不配置 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,//服務啟動時自動在瀏覽器中打開應用
  // 反向代理配置
  proxy: { //配置多個代理
   '/dev-api': {
    target: "https://xxxx.com/",//例子:http://192.168.1.177:8080 或測試服務器https://xxxx.com
    changeOrigin: true,///設置訪問目標地址允許跨域
    rewrite: (p) => p.replace(/^\/dev-api/, '')
   },
   '/prod-api': {
    target: "https://xxxx.com/",
    changeOrigin: true,///設置訪問目標地址允許跨域
    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ā)時，如果需要代理多個服務器，場景為后端接口分布在不同開發(fā)同事本機上，開發(fā)時通過選項寫法代理無縫對接多個服務器。

// 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官網:

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

擴展知識：

總結

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

相關文章

最新評論