代码拉取完成,页面将自动刷新
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 }
= viteEnv
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: false,
// 服务端口号
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),
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。