從0到1，帶你搭建Vite+Vue3+Pinia+Naive UI後臺（二） - 配置篇（中）_大臉怪

highlight: nnfx-dark theme: cyanosis

前言

此篇是系列文章第三篇，如沒有看過前兩篇文章建議先食用前兩篇文章

系列歷史文章： 1. 從0到1，帶你搭建Vite+Vue3+Pinia+Naive UI後臺（一） - 前置篇 - 掘金 (juejin.cn) 2. 從0到1，帶你搭建Vite+Vue3+Pinia+Naive UI後臺（二） - 配置篇（上） - 掘金 (juejin.cn)

配置篇

配置篇分上中下三部分，本篇主要介紹外掛配置 1. 環境配置 + vite配置 2. 外掛配置 3. eslint+prettier配置

外掛配置

本篇將介紹如何整合以下幾個外掛：

vite-plugin-vue-setup-extend：擴充套件setup外掛，支援在script標籤中使用name屬性
rollup-plugin-visualizer：rollup打包分析外掛
vite-plugin-html：一個針對 index.html，提供壓縮和基於 ejs 模板功能的 vite 外掛
unocss：出自antfu的原子化css

在後續文章中也會按進度整合圖示外掛、元件庫按需引入外掛及mock外掛

整合 vite-plugin-vue-setup-extend

第一步：安裝vite-plugin-vue-setup-extend sh pnpm i vite-plugin-vue-setup-extend -D

第二步：在build資料夾下建立plugin/index.js

build/plugin/index.js ```js import vue from '@vitejs/plugin-vue'

/ * 擴充套件setup外掛，支援在script標籤中使用name屬性 * usage: / import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export function createVitePlugins(viteEnv, isBuild) { const plugins = [ vue(), VueSetupExtend(), ]

return plugins } ```

第三步：修改vite.config.js

vite.config.js ```js import { defineConfig, loadEnv } from 'vite' import path from 'path'

import { wrapperEnv, createProxy } from './build/utils' import { createVitePlugins } from './build/plugin'

export default defineConfig(({ command, mode }) => { const isBuild = command === 'build' const env = loadEnv(mode, process.cwd()) const viteEnv = wrapperEnv(env) const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY } = viteEnv

return { plugins: createVitePlugins(viteEnv, isBuild), base: VITE_PUBLIC_PATH || '/', resolve: { // 設定別名 alias: { '@': path.resolve(__dirname, 'src'), }, }, css: { preprocessorOptions: { //define global scss variable scss: { additionalData: @import '@/styles/variables.scss';, }, }, }, server: { host: '0.0.0.0', // 預設為'127.0.0.1'，如果將此設定為 0.0.0.0 或者 true 將監聽所有地址，包括區域網和公網地址 port: VITE_PORT, // 埠 proxy: createProxy(VITE_PROXY), // 代理 } } })

``` 檔案修改處如下圖所示：

整合rollup-plugin-visualizer

第一步：安裝rollup-plugin-visualizer sh pnpm i rollup-plugin-visualizer -D

第二步：修改build/plugin/index.js

build/plugin/index.js

```js import vue from '@vitejs/plugin-vue'

/ * 擴充套件setup外掛，支援在script標籤中使用name屬性 * usage: / import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// rollup打包分析外掛 import visualizer from 'rollup-plugin-visualizer'

export function createVitePlugins(viteEnv, isBuild) { const plugins = [ vue(), VueSetupExtend(), ]

if (isBuild) { plugins.push( visualizer({ open: true, gzipSize: true, brotliSize: true, }) ) }

return plugins } ```

第三步：打包驗證下外掛是否生效

sh pnpm run build

正常應該會在根目錄產生一個stats.html檔案，通過瀏覽器開啟這個檔案，會看到如下頁面，由於目前還算是一個空專案，所有還沒有太多的依賴項

第四步：將stats.html新增到git忽略項

.gitignore ```sh ...

stats.html ```

stats.html每次打包都會生成一個新的，無需通過git新增提交

整合vite-plugin-html

整合 vite-plugin-html 主要是為了對 index.html 進行壓縮和注入動態資料，例如替換網站標題和cdn

第一步：安裝vite-plugin-html sh pnpm i [email protected] -D

第二步：建立build/plugin/html.js

build/plugin/html.js ```js import html from 'vite-plugin-html'

export function configHtmlPlugin(viteEnv, isBuild) { const { VITE_APP_TITLE } = viteEnv const htmlPlugin = html({ minify: isBuild, inject: { data: { title: VITE_APP_TITLE, }, }, }) return htmlPlugin } ```

第三步：修改build/plugin/index.js

build/plugin/index.js ```js import vue from '@vitejs/plugin-vue'

/ * 擴充套件setup外掛，支援在script標籤中使用name屬性 * usage: / import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// rollup打包分析外掛 import visualizer from 'rollup-plugin-visualizer'

import { configHtmlPlugin } from './html'

export function createVitePlugins(viteEnv, isBuild) { const plugins = [ vue(), VueSetupExtend(), configHtmlPlugin(viteEnv, isBuild), ]

if (isBuild) { plugins.push( visualizer({ open: true, gzipSize: true, brotliSize: true, }) ) }

return plugins } ```

第四步：修改 index.html 的title，並重新啟動，驗證外掛是否整合成功

html <title><%= title %></title>

如無意外將看到頁面的title已經被替換成我們配置好的title了

整合unocss

第一步：安裝依賴

sh pnpm i unocss @unocss/preset-attributify @unocss/preset-icons @unocss/preset-uno -D

第二步：新建檔案 build/plugin/unocss.js

build/plugin/unocss.js ```js import Unocss from 'unocss/vite' import { presetUno, presetAttributify, presetIcons } from 'unocss'

export function unocss() { return Unocss({ presets: [presetUno(), presetAttributify(), presetIcons()], }) } ```

第三步：修改檔案 build/plugin/index.js

build/plugin/index.js ``` import vue from '@vitejs/plugin-vue'

/ * 擴充套件setup外掛，支援在script標籤中使用name屬性 * usage: / import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// rollup打包分析外掛 import visualizer from 'rollup-plugin-visualizer'

import { configHtmlPlugin } from './html' import { unocss } from './unocss'

export function createVitePlugins(viteEnv, isBuild) { const plugins = [ vue(), VueSetupExtend(), configHtmlPlugin(viteEnv, isBuild), unocss() ]

if (isBuild) { plugins.push( visualizer({ open: true, gzipSize: true, brotliSize: true, }) ) }

return plugins } ```

第四步：新建 styles/reset.scss、styles/public.scss、styles/index.scss

styles/reset.scss ```scss html { box-sizing: border-box; }

*, ::before, ::after { margin: 0; padding: 0; box-sizing: inherit; }

a { text-decoration: none; color: #333; }

a:hover, a:link, a:visited, a:active { text-decoration: none; }

ol, ul { list-style: none; }

input, textarea { outline: none; border: none; resize: none; }

body { font-size: 14px; font-weight: 400; } ```

styles/public.scss ```scss html { font-size: 4px; // * 1rem = 4px 方便unocss計算：在unocss中 1字型單位 = 0.25rem，相當於 1等份 = 1px }

html, body { width: 100%; height: 100%; overflow: hidden; background-color: #f2f2f2; font-family: 'Encode Sans Condensed', sans-serif; }

/ 滾動條樣式 / ::-webkit-scrollbar { width: 8px; background-color: #eee; }

::-webkit-scrollbar-thumb { background-color: #c1c1c1;

&:hover { background-color: #a8a8a8; } } ```

styles/index.scss scss @import './reset.scss'; @import './public.scss';

第步：修改 src/main.js 引入uno.css

src/main.js ```js import '@/styles/index.scss' import 'uno.css'

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

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

第五步：修改 src/App.vue ,使用unocss以驗證unocss是否整合成功

src/App.vue ```vue

```

重新啟動看到以下頁面就證明整合成功了，另外 src/components/HelloWorld.vue 檔案可以直接刪除了

外掛篇暫時就介紹到這裡，本篇內容較多，但除了unocss其他都相對簡單，unocss的整合相對複雜，但整合後使用起來還是很爽的，重點是它足夠輕

如有跟著一起做的朋友可以git提交一下程式碼，如有錯誤之處請在評論區提醒指正，下一篇再見~

總結

開源不易，還請各位賞個star

原始碼-github：vue-naive-admin (github.com)

原始碼-gitee：vue-naive-admin (gitee.com)

下一篇計劃： 從0到1，帶你搭建Vite+Vue3+Pinia+Naive UI後臺（二） - 配置篇（下）