Hi Dai Gei Ho~ 我是Winnie～ 延續上篇沒有說完的內容，今天我們要來看看 Vite Config 常見配置。

首先我們先可以打開專案根目錄中的 vite.config.js，初始的配置會如以下：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' // 如剛開始時建造專案選擇vue，才會有此行

export default defineConfig({
  plugins: [
    vue() 
  ]
})

接下來，我們依照 開發模式 與 打包模式 兩個情境模式來分類常見配置介紹，

開發模式

路徑別名設置

alias 路徑別名 用來表示檔案的路徑，當今天檔案路徑階層很多就可以透過別名來避免寫錯的問題。

設置如下：

// vite.config.js
const { resolve } = require('path');

export default defineConfig({
  // 略 ...
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    }
  },
}

結果如下:

// main.js
import Header from "/@/components/Header.vue";

以別名方式引入圖片

另外如果想將圖片的src路徑使用別名來呈現，需注意的是，如使用 常規的path.resolve來引入圖片，會造成圖片顯示錯誤，因為引入圖片的alias開頭需使用/，同時使用字串來引入。

配置如下：

//vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    base: './',
    plugins: [vue()],
    resolve: {
        alias: {
             '/images': 'src/assets/images',
        },
    },
})

引入方式：

//app.vue

<template>
    <img src="/images/logo.png" alt="">
</template>

css 配置

當我們要讓 全局都可以引用base.scss ，需在config中進行設置，範例如下：

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/base.scss";`
      }
    }
  }
})

跨domain proxy 設定

ps 需注意這只適用於開發階段

身為前端工程師，相信大家最常遇到的就是要 Call API 時遇到跨domain 的問題了，如果今天在開發階段，我們可以透過 proxy代理的設定，來解決此問題。

設置方法如下：

export default defineConfig({
  server: {
    proxy: {
      // 字串寫法
      '/foo': 'http://localhost:4567',
      // 選項寫法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正則寫法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      },
    }
  }
})

打包模式

MPA多頁應用

當我們今天有多頁面需要打包，此時 規定配置如下：

  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        arcticle: resolve(__dirname, 'arcticle/index.html')
      }
    }
  },

清除打包檔名的hash

當我們在 build檔案 的時候，Vite 會在 打包出來的檔名預設會幫你加上檔名的一個 hash，是意圖如下：

但如果今天我們想要保留原檔名想要取消檔名的hash時，配置如下：

  build: {
    rollupOptions: {
        output: {
          entryFileNames: `assets/[name].js`,
          chunkFileNames: `assets/[name].js`,
          assetFileNames: `assets/[name].[ext]`
        }
  },

以上就是今天針對 Vite config 常見配置的介紹，如果還有更多想了解設定，大家可以到 文件 仔細品嚐，同時在這邊也歡迎大家一起分享交流自己覺得Vite好用的config配置。（留言分享按讚 開啟小鈴鐺～不知道為何突然想說這句XD），

最後，截止至今天的文章，關於 vite 不專業的講解的系列文 可能差不多要先到這邊了，在接下來文章主題中 會開始 介紹 Vue3 Composition API ，而有別於前面11篇的較多在 原理的講解，下半段文章主要 會著重於 Vue3 Composition API 實際應用，再請各位客官們多多指教了，謝謝大家。