vue3中vite.config.js相關常用配置超詳細講解

更新時間：2025年04月03日 08:57:15 作者：陌上花開

在Vue3項目中vite.config.js文件是Vite構建工具的配置文件,它用于定義項目的構建和開發(fā)選項,這篇文章主要介紹了vue3中vite.config.js相關常用配置的相關資料,需要的朋友可以參考下

base（默認為/）開發(fā)或生產(chǎn)環(huán)境服務的公共基礎路徑。合法的值包括以下幾種：

絕對 URL 路徑名，例如 /foo/ 部署在根目錄下的foo文件下頁面路徑為： https://foo.com/foo/

完整的 URL，例如 https://foo.com/（默認為/）部署在根目錄下

空字符串或 ./（用于嵌入形式的開發(fā)）可用于部署在任何路徑下

** 注意點：**

== vue3 vite.config.js 中配置的base路徑，當訪問過程中需要使用動態(tài)連接的 url 時，可以使用全局注入的 import.meta.env.BASE_URL 變量，它的值為公共基礎路徑；vue2 中通過process.env.BASE_URL 獲取 ==

plugins：插件列表，可以是自定義的Vite插件或第三方插件，用于擴展Vite功能

resolve：用于配置模塊解析。例如，可以設置resolve.alias來設置路徑別名，簡化導入語句。

server：配置開發(fā)服務器。例如，可以設置server.port來指定端口，或者server.host來指定主機

build：配置構建輸出

import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { build } from 'vite'
import vue from '@vitejs/plugin-vue'
const __dirname = fileURLToPath(new URL('.', import.meta.url))
export default defineConfig({
  base: '/screen',//指定了應用程序在服務器上的根目錄位置，設置連接前綴
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
   server: {
    open: '/docs/index.html',//開發(fā)服務器啟動時，自動在瀏覽器中打開應用程序。
    proxy: {//代理
       port: 3000,
       host: 'localhost',
       cors： true,//為開發(fā)服務器配置 CORS。默認啟用并允許任何源，傳遞一個 選項對象 來調整行為或設為 false 表示禁用。
      // 字符串簡寫寫法：http://localhost:5173/foo -> http://localhost:4567/foo
      '/foo': 'http://localhost:4567',
      // 帶選項寫法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
      build: {
        outDir: 'dist',//指定輸出路徑（相對于 項目根目錄).
        assetsDir: 'assets',//指定生成靜態(tài)資源的存放路徑
	    rollupOptions: {
	      // ...
	    }
  }
})

總結

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

您可能感興趣的文章: