mirror of
https://github.com/xiangshu233/vue3-vant4-mobile.git
synced 2025-04-05 06:04:12 +08:00
182 lines
6.6 KiB
TypeScript
182 lines
6.6 KiB
TypeScript
import { resolve } from 'node:path'
|
||
import type { ConfigEnv, UserConfig } from 'vite'
|
||
import { loadEnv } from 'vite'
|
||
import { format } from 'date-fns'
|
||
import { wrapperEnv } from './build/utils'
|
||
import { createVitePlugins } from './build/vite/plugin'
|
||
import { OUTPUT_DIR } from './build/constant'
|
||
import { createProxy } from './build/vite/proxy'
|
||
import pkg from './package.json'
|
||
|
||
const { dependencies, devDependencies, name, version } = pkg
|
||
|
||
// 当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。
|
||
// path.resolve () 方法用于将一系列路径段解析为绝对路径。它通过处理从右到左的路径序列来工作，在每个路径之前添加，直到创建绝对路径。
|
||
function pathResolve(dir: string) {
|
||
return resolve(process.cwd(), '.', dir)
|
||
}
|
||
|
||
const __APP_INFO__ = {
|
||
// APP 后台管理信息
|
||
pkg: { dependencies, devDependencies, name, version },
|
||
// 最后编译时间
|
||
lastBuildTime: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
|
||
}
|
||
|
||
/** @type {import('vite').UserConfig} */
|
||
export default ({ command, mode }: ConfigEnv): UserConfig => {
|
||
// process.cwd() 方法返回 Node.js 进程的当前工作目录
|
||
// mode 返回应用的环境模式 development（开发环境） 或者 production（生产环境）
|
||
// command 返回（dev/serve 或 build）命令模式，yarn dev 返回 dev/serve yarn build 返回 build
|
||
const root = process.cwd()
|
||
// loadEnv() 根据 mode 检查 root(项目根路径) 路径下 .env、.env.development 环境文件，输出 NODE_ENV 和 VITE_ 开头的键值队
|
||
const env = loadEnv(mode, root)
|
||
// 读取并处理所有环境变量配置文件 .env
|
||
const viteEnv = wrapperEnv(env)
|
||
|
||
const { VITE_PUBLIC_PATH, VITE_DROP_CONSOLE, VITE_PORT, VITE_PROXY, VITE_GLOB_PROD_MOCK }
|
||
= viteEnv
|
||
|
||
const prodMock = VITE_GLOB_PROD_MOCK
|
||
|
||
const isBuild = command === 'build'
|
||
// command === 'build'
|
||
return {
|
||
base: VITE_PUBLIC_PATH,
|
||
root,
|
||
|
||
// 别名
|
||
resolve: {
|
||
alias: [
|
||
// @/xxxx => src/xxxx
|
||
{
|
||
find: /\@\//,
|
||
replacement: `${pathResolve('src')}/`,
|
||
},
|
||
// #/xxxx => types/xxxx
|
||
{
|
||
find: /\#\//,
|
||
replacement: `${pathResolve('types')}/`,
|
||
},
|
||
],
|
||
dedupe: ['vue'],
|
||
},
|
||
|
||
// 定义全局常量替换方式
|
||
define: {
|
||
// 在生产中 启用/禁用 intlify-devtools 和 vue-devtools 支持，默认值 false
|
||
__INTLIFY_PROD_DEVTOOLS__: false,
|
||
__APP_INFO__: JSON.stringify(__APP_INFO__),
|
||
},
|
||
|
||
esbuild: {
|
||
// 使用 esbuild 压缩 剔除 console.log
|
||
drop: VITE_DROP_CONSOLE ? ['debugger', 'console'] : [],
|
||
// minify: true, // minify: true, 等于 minify: 'esbuild',
|
||
},
|
||
|
||
build: {
|
||
// 设置最终构建的浏览器兼容目标
|
||
target: 'es2015',
|
||
minify: 'esbuild',
|
||
// 构建后是否生成 source map 文件(用于线上报错代码报错映射对应代码)
|
||
sourcemap: false,
|
||
cssTarget: 'chrome80',
|
||
// 指定输出路径（相对于 项目根目录)
|
||
outDir: OUTPUT_DIR,
|
||
// 只有 minify 为 terser 的时候, 本配置项才能起作用
|
||
// terserOptions: {
|
||
// compress: {
|
||
// // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
|
||
// keep_infinity: true,
|
||
// // 打包是否自动删除 console
|
||
// drop_console: VITE_DROP_CONSOLE,
|
||
// },
|
||
// },
|
||
// 启用/禁用 gzip 压缩大小报告
|
||
// 压缩大型输出文件可能会很慢，因此禁用该功能可能会提高大型项目的构建性能
|
||
reportCompressedSize: true,
|
||
// chunk 大小警告的限制（以 kbs 为单位）
|
||
chunkSizeWarningLimit: 2000,
|
||
// 自定义底层的 Rollup 打包配置
|
||
rollupOptions: {
|
||
// 静态资源分类打包
|
||
output: {
|
||
chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
|
||
entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
|
||
assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件像 字体，图片等
|
||
// 将 node_modules 三方依赖包最小化拆分
|
||
manualChunks(id) {
|
||
if (id.includes('node_modules')) {
|
||
const paths = id.toString().split('node_modules/')
|
||
if (paths[2]) {
|
||
return paths[2].split('/')[0].toString()
|
||
}
|
||
|
||
return paths[1].split('/')[0].toString()
|
||
}
|
||
},
|
||
},
|
||
},
|
||
},
|
||
|
||
css: {
|
||
preprocessorOptions: {
|
||
less: {
|
||
modifyVars: {},
|
||
javascriptEnabled: true,
|
||
// 注入全局 less 变量
|
||
additionalData: `@import "src/styles/var.less";`,
|
||
},
|
||
},
|
||
},
|
||
|
||
server: {
|
||
host: true,
|
||
// 服务启动时是否自动打开浏览器
|
||
open: true,
|
||
// 服务端口号
|
||
port: Number(VITE_PORT),
|
||
proxy: createProxy(VITE_PROXY),
|
||
// 预热文件以降低启动期间的初始页面加载时长
|
||
warmup: {
|
||
// 预热的客户端文件：首页、views、 components
|
||
clientFiles: ['./index.html', './src/{views,components}/*'],
|
||
},
|
||
// proxy: {
|
||
// '/api': {
|
||
// target: '',
|
||
// changeOrigin: true,
|
||
// rewrite: (path) => path.replace(/^\/api/, '/api/v1')
|
||
// }
|
||
// }
|
||
},
|
||
|
||
optimizeDeps: {
|
||
/**
|
||
* 依赖预构建，vite 启动时会将下面 include 里的模块，编译成 esm 格式并缓存到 node_modules/.vite 文件夹，
|
||
* 页面加载到对应模块时如果浏览器有缓存就读取浏览器缓存，如果没有会读取本地缓存并按需加载
|
||
* 尤其当您禁用浏览器缓存时（这种情况只应该发生在调试阶段）必须将对应模块加入到 include 里，
|
||
* 否则会遇到开发环境切换页面卡顿的问题（vite 会认为它是一个新的依赖包会重新加载并强制刷新页面），
|
||
* 因为它既无法使用浏览器缓存，又没有在本地 node_modules/.vite 里缓存
|
||
* 温馨提示：如果你使用的第三方库是全局引入，也就是引入到 src/main.ts 文件里，
|
||
* 就不需要再添加到 include 里了，因为 vite 会自动将它们缓存到 node_modules/.vite
|
||
*/
|
||
include: [
|
||
'pinia',
|
||
'lodash-es',
|
||
'axios',
|
||
],
|
||
// 打包时强制排除的依赖项
|
||
exclude: [
|
||
// https://www.mulingyuer.com/archives/928/
|
||
'vant',
|
||
'@vant/use',
|
||
],
|
||
},
|
||
|
||
// 加载插件
|
||
plugins: createVitePlugins(viteEnv, isBuild, prodMock),
|
||
}
|
||
}
|