vite配置詳解

隨著前端技術的發展，越來越多的前端項目採用VUE、React等前端框架進行開發。而vite作為一款基於ES6模塊伺服器的構建工具，被越來越多的開發者所使用。本文將從多個方面對vite配置做詳細的闡述，幫助開發者更好地使用vite構建前端項目

一、vite配置跨域

在前端項目中，不可避免地需要與後端介面進行交互。由於同源策略的限制，我們需要進行跨域設置。在vite項目中，可以通過配置文件解決跨域問題。以下是一個簡單的跨域配置示例：

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
}

以上配置的含義是將所有以/api開頭的請求轉發到http://localhost:3000上。其中rewire屬性的作用是將請求路徑中的/api去掉，這樣就能順利地轉發到後端API伺服器了。

二、vite配置兩個訪問地址

vite將運行地址和構建後的地址分離開來，開發環境默認運行在localhost:3000，在瀏覽器地址欄中輸入localhost:5000或localhost:3000可以訪問到同一個頁面，便於開發和調試。下面是相關配置：

export default {
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
  build: {
    outDir: 'dist',
    assetsDir: 'static',
    assetsInlineLimit: 4096,
  }
}

三、vite配置vue

對於使用vue進行開發的項目，需要進行相關配置才能運行。以下是相關配置：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

在代碼中引入vue，並創建vue實例。同時需要在vite.config.js中配置以下內容：

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue()
  ]
}

四、vite配置輸出路徑

在vite中，可以通過設置outDir來配置輸出路徑。例如：

export default {
  build: {
    outDir: 'dist',
  }
}

以上配置意味著運行vite build命令時，輸出文件將會存在dist文件夾下。

五、vite配置cdn

對於一些通用的庫如Vue、React、Lodash等，我們可以將其引用地址替換為CDN資源地址，以提高打包構建的速度和減少前端資源的下載。以下是相關配置：

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom']
        }
      }
    }
  }
}

六、vite配置代理

在開發過程中，我們往往需要連接後端伺服器進行開發、調試。為了方便調試，我們可以將請求代理到後端伺服器，避免跨域等問題。以下是相關配置：

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
}

七、vite配置axios

對於需要發送請求的項目，我們可以使用Axios來實現HTTP請求。以下是相關配置：

import axios from 'axios'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.config.globalProperties.$http = axios
app.mount('#app')

八、vite配置環境變數

在不同的環境中，我們需要使用不同的參數，例如開發環境中需要使用開發伺服器的地址，而線上環境中則需要使用線上伺服器的地址。這時我們就需要使用環境變數來實現不同環境參數的切換。以下是相關配置：

export default {
  define: {
    'process.env': {
      BASE_URL: process.env.NODE_ENV === 'production'
        ? '/production-sub-path/'
        : '/'
    }
  }
}

九、vite配置對象合併

當我們需要在多個對象之間拷貝屬性時，我們可以使用對象合併。在vite中，對象合併可以通過插件來實現。以下是相關配置：

import merge from 'deepmerge'

export default {
  plugins: [
    {
      name: 'merge-config',
      config(config) {
        return merge(config, {
          build: {
            cssCodeSplit: false
          }
        })
      }
    }
  ]
}

以上代碼表示將build對象中的cssCodeSplit屬性設置為false

通過以上詳細的闡述，希望能夠幫助到開發者更好地使用vite構建前端項目，提高開發效率。