vue3+vite 项目的一些配置选择
2024年10月18日...大约 2 分钟
最近在做的项目中已经开始使用 vue3 和 vite 的组合了，中间有一些项目相关的配置，在此做下记录
mock 方案
使用 vite-plugin-mock 插件加 fakerjs 做 mock 数据
安装
# 安装
pnpm i vite-plugin-mock fakerjs -Dvite 配置文件
// vite.config.ts 配置
import { viteMockServe } from "vite-plugin-mock"
plugins: [
// 本地 mock
!env.VITE_USE_PROXY && viteMockServe({
mockPath: './mock/',//设置模拟数据的存储文件夹
//@ts-ignore
supportTs: true,//是否读取ts文件模块
logger: true,//是否在控制台显示请求日志
localEnabled: true,//设置是否启用本地mock文件
ignore: (fileName) => {
// utils 中放了一些快速 mock 的函数
if (fileName === '__utils.ts') {
return true
}
return false
}
}),
]mock 文件示例
// mock 文件示例，mock/index.ts
// 一个较复杂的列表数据返回，可用于调试空数据、大量数据等情况
export default [
{
url: addApiPrefix(GET_CLUE_LIST_API_URL),
method: 'get',
response: ({ query }) => {
const keyword = query.keyword;
let resData = {}
if (keyword === '哈哈') {
resData = {
list: [
getClueItem()
],
total: 1,
leaveAddWxCnt: 10,
}
} else if (keyword === '空数据') {
resData = {
list: [],
total: 0,
leaveAddWxCnt: 0,
}
} else {
const total = 16000
const { page, pageSize } = query
const reqCount = page * pageSize
let list: any[] = []
if (reqCount <= total) {
for(let i = 1; i <= pageSize; i++) {
const index = i + (page - 1) * pageSize
list.push(getClueItem(index))
}
} else {
const count = total - (page - 1) * pageSize
for(let i = 1; i <= count; i++) {
const index = i + (page - 1) * pageSize
list.push(getClueItem(index))
}
}
resData = {
list,
total,
leaveAddWxCnt: 60,
}
}
return {
errNo: 0,
data: resData
}
}
},
]svg 全局引入方案
安装
pnpm install vite-plugin-svg-icons -Dvite 配置
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
plugins: [
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/assets/svgs')],
// 指定symbolId格式
symbolId: 'icon-svg-[dir]-[name]',
// 插入位置 'body-last' | 'body-first'
inject: 'body-first',
customDomId: '__svg__icons__dom__',
}),
]多页面方案
尝试了很多插件，还是 vite-plugin-virtual-mpa 最能满足需求，开箱即用
安装
pnpm i vite-plugin-virtual-mpa -Dvite 配置
plugins: [
createMpaPlugin({
template: 'build/template.html',
htmlMinify: true,
pages,
previewRewrites: [
// If there's no index.html, you need to manually set rules for history fallback like:
{ from: /.*/, to: '/index-xx.html' },
],
transformHtml(html, ctx) {
return {
html,
tags: [],
}
},
// 这项一定要配置，不然会报错
watchOptions: {
events: ['add', 'unlink', 'change'],
include: ['**/pages/**', '**/infos/**'],
handler: () => {},
},
}),
]模版和页面 list 配置
<!-- build/template.html -->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<link rel="icon" href="<%= iconPath %>">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title><%= title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>// build/page.ts
import { createPages } from 'vite-plugin-virtual-mpa'
export const pages = createPages([
{
name: 'index-xx',
filename: 'index-xx.html',
entry: '/src/pages/index-xx/main.ts',
data: { title: '页面标题', iconPath: '/favicon-xx.ico' }
}
])项目结构
src
- pages
index
- App.vue
- main.ts
index-xx
- App.vue
- main.ts