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 实际应用，再请各位客官们多多指教了，谢谢大家。