vite+react

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import { createHtmlPlugin } from 'vite-plugin-html'
import vitePluginEslint from "vite-plugin-eslint"
const  resolve = dir =>  path.resolve(__dirname, '.', dir)

// https://vitejs.dev/config/
export default defineConfig(( { mode } ) => {
	return {
		plugins: [
			react(),
			createHtmlPlugin({
				minify: true,
				pages: [
					{
						filename: 'index.html',
						template: 'index.html',
						injectOptions: {
							data: {
								title: '网站工具管理系统',
								DATE: Date.now()
							},
						},
					},
				]
			}),
			// 启用代码检查
			mode === 'development' && vitePluginEslint({
				lintOnStart: false, // 启动时候是否就执行 eslint 校验，如果开启的话有eslint的报错则服务是会启动失败
			})
		],
		// 项目启动的根路径
		// root:  './',
		// 入口
		entry: 'index.html',
		// 打包根路径
		base:'./',
		// 静态资源服务的文件夹
		publicDir: 'public',
		// 是否开启ssr服务断渲染
		ssr: false,
		// 重命名路径
		resolve: {
			alias : {
				'@' 		: resolve('src'),
				'@assets' 	: resolve('src/assets'),
				'@css' 		: resolve('src/assets/css'),
				'@img' 		: resolve('src/assets/images'),
				'@js' 		: resolve('src/assets/js'),
				
				'@com'		: resolve('src/_pub/common'),
				'@utils' 	: resolve('src/_pub/common/utils'),
				'@cpt'		: resolve('src/_pub/global/component'),
				'@tp'		: resolve('src/_pub/global/template'),
				'@plugin'	: resolve('src/_pub/global/plugin'),
				'@antd' 	: resolve('src/_pub/global/plugin/antd'),
				'@echart'	: resolve('src/_pub/global/plugin/echart'),
				'#private' 	: resolve('src/_pub/private'),
				'#cpt'		: resolve('src/_pub/private/component'),
				'#tp' 		: resolve('src/_pub/private/template'),
				'#plugin'	: resolve('src/_pub/private/plugin'),
				'#frame'	: resolve('src/_pub/private/frame'),
				
				'$project'	: resolve('src/project'),
				'$cpt'		: resolve('src/project/component'),
				'$tp' 		: resolve('src/project/template'),
				'$frame' 	: resolve('src/project/frame'),
				'$plugin' 	: resolve('src/project/plugin'),
				'$utils'	: resolve('src/project/utils'),
				
				'@views'	: resolve('src/views'),
				'@pages' 	: resolve('src/pages'),
			}
		},
		server:{
			host: '0.0.0.0',	// 主机
			port: 8081,			// 端口
			open: true,			// 是否自动开启浏览器
			https: false,		// 
			// hmr:true, 			// 是否开启自动刷新
			cors: true,			// 允许跨域
			// 代理
			proxy: {
				// '/api': {
				// 	target: 'http://xxx.xxx.xxx.xxx:8000',
				// 	changeOrigin: true,
				// 	secure: false,
				// 	rewrite: (path) => path.replace('/api/', '/')
				// }
			}
		},
		// 开启控制台输出日志
		silent: false,
		// 哪个第三方的包需要重新编译
		optimizeDeps:[
			// exclude: ['axios', 'qs', 'vue', 'vuex']
		],
		//编译
		build: {
			// 打包文件放置目录
			outDir: './build',
			// 输出的静态资源的文件夹名称
			assetsDir:'static',
			//构建后是否生成 source map 文件
			sourcemap: false,
			// 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项
			assetsInlineLimit: 4096,
			// 是否提取 CSS 到单独的文件中
			cssCodeSplit: true,
			// 是否开启 CSS 压缩
			cssMinify: true,
			// 是否开启 CSS 去重
			cssInlineLimit: 4096,
			// 启用/禁用 esbuild 的 minification，如果设置为 false 则使用 Terser 进行 minification
			// target: 'es2018', // 可选值：'esnext' | 'es2020' | 'es2019' | 'es2018' | 'es2017' | 'es2016' | 'es2015' | 'es5'
			// 设置为 false 来禁用将构建后的文件写入磁盘
			write: true,
			//默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。
			emptyOutDir: true,
			// 是否开启 brotli 压缩
			// brotli: true,
			// 启用/禁用 brotli 压缩大小报告
			// brotliSize: true,
			// chunk 大小警告的限制
			chunkSizeWarningLimit: 500,
			// 当设置为 true，构建后将会生成 manifest.json 文件
			manifest: false,
			// 自定义底层的 Rollup 打包配置
			rollupOptions: {
				// 确保外部化处理那些你不想打包进库的依赖
				// external: ['vue', 'nf-tool'],
				output: {
					 // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
					// globals: { vue: 'Vue', 'nf-tool': 'nfTool' },
					// 自定义输出文件名
					// chunkFileNames: 'static/js1/[name]-[hash].js',
					// entryFileNames: 'static/js2/[name]-[hash].js',
					// assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
					// brotliSize: false, // 不统计
					// target: 'esnext', 
					// minify: 'esbuild' // 混淆器，terser 构建后文件体积更小
				}
			},
			// @rollup/plugin-commonjs 插件的选项
			commonjsOptions: { },
			// terser 构建后文件体积更小
			minify: 'terser', // 可选值：'terser' | 'esbuild'
			// 传递给 Terser 的更多 minify 选项。
			terserOptions: {
				compress: {	drop_console: true, drop_debugger: true }	// 去除 console
			}
		},
		// 要将一些共享的全局变量传递给所有的Less样式
		css:{
			preprocessorOptions:{
				less:{
					modifyVars: {
						
					},
					javascriptEnabled: true
				}
			}
		},
		json: {
			//是否支持从 .json 文件中进行按名导入
			namedExports: true,
			//若设置为 true 导入的json会被转为 export default JSON.parse("..") 会比转译成对象字面量性能更好
			stringify:false
		}
	}
})