iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Modern Web

前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue系列 第 11

Day_11 : 讓 Vite 來開啟你的 Vue 之 Config 常見配置 (Vite 最終篇 XD)

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 實際應用,再請各位客官們多多指教了,謝謝大家。


上一篇
Day_10 : 讓 Vite 來開啟你的Vue 之 結構目錄
下一篇
Day_12 : 讓 Vite 來開啟你的Vue 之 來!開始你的 Vue 3
系列文
前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue30

尚未有邦友留言

立即登入留言