import {
?? ?defineConfig,
?? ?loadEnv
} from 'vite'
import vue from '@vitejs/plugin-vue'
import {
?? ?resolve
} from 'path'
/* 一个按需自动导入Vue/Vue Router等官方Api的插件 */
import AutoImport from 'unplugin-auto-import/vite'
/* 解决vue3下 script setup语法糖 下 ,手动设置组件name不方便的问题 */
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
/* 打包体积分析插件 */
import {
?? ?visualizer
} from 'rollup-plugin-visualizer'
/* 打包压缩 */
import viteCompression from 'vite-plugin-compression'
import legacy from '@vitejs/plugin-legacy';
import Components from 'unplugin-vue-components/vite';
import {
?? ?AntDesignVueResolver
} from 'unplugin-vue-components/resolvers';
export const r = (...args) => resolve(__dirname, '.', ...args)
export default defineConfig(({
?? ?command,
?? ?mode
}) => {
?? ?const envConfig = loadEnv(mode, './')
?? ?return {
?? ??? ?plugins: [
?? ??? ??? ?vue(),
?? ??? ??? ?viteCompression(),
?? ??? ??? ?vueSetupExtend(),
?? ??? ??? ?AutoImport({
?? ??? ??? ??? ?imports: ['vue'],
?? ??? ??? ??? ?dirs: ['./src/utils/permission'],
?? ??? ??? ??? ?dts: r('src/auto-imports.d.ts')
?? ??? ??? ?}),
?? ??? ??? ?/* 1.下面的注释打开，荣耀平板可以用，注释掉小米联想平板可以用 */
?? ??? ??? ?legacy({
?? ??? ??? ??? ?// targets:['chrome 52', "defaults" ,"ie 11"], // 需要兼容的目标列表，可以设置多个
?? ??? ??? ??? ?// targets: ["chrome 80", "defaults", "not IE 11"],?? ??? ??? ??? ?targets: ['defaults', "ie >= 11", 'chrome 52'], // 需要兼容的目标列表，可以设置多个
?? ??? ??? ??? ?cssTarget: ["chrome52"],
?? ??? ??? ??? ?modernPolyfills: true,
?? ??? ??? ??? ?renderLegacyChunks: true,
?? ??? ??? ??? ?additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // 面向IE11时需要此插件
?? ??? ??? ??? ?polyfills: [
?? ??? ??? ??? ??? ?'es.symbol',
?? ??? ??? ??? ??? ?'es.promise',
?? ??? ??? ??? ??? ?'es.promise.finally',
?? ??? ??? ??? ??? ?'es/map',
?? ??? ??? ??? ??? ?'es/set',
?? ??? ??? ??? ??? ?'es.array.filter',
?? ??? ??? ??? ??? ?'es.array.for-each',
?? ??? ??? ??? ??? ?'es.array.flat-map',
?? ??? ??? ??? ??? ?'es.object.define-properties',
?? ??? ??? ??? ??? ?'es.object.define-property',
?? ??? ??? ??? ??? ?'es.object.get-own-property-descriptor',
?? ??? ??? ??? ??? ?'es.object.get-own-property-descriptors',
?? ??? ??? ??? ??? ?'es.object.keys',
?? ??? ??? ??? ??? ?'es.object.to-string',
?? ??? ??? ??? ??? ?'web.dom-collections.for-each',
?? ??? ??? ??? ??? ?'esnext.global-this',
?? ??? ??? ??? ??? ?'esnext.string.match-all'
?? ??? ??? ??? ?]
?? ??? ??? ?}),
?? ??? ??? ?visualizer(),
?? ??? ??? ?Components({
?? ??? ??? ??? ?resolvers: [
?? ??? ??? ??? ??? ?AntDesignVueResolver({
?? ??? ??? ??? ??? ??? ?importStyle: false, // css in js
?? ??? ??? ??? ??? ?}),
?? ??? ??? ??? ?],
?? ??? ??? ?})
?? ??? ?],?? ??? ?define: {
?? ??? ??? ?//'process.env': {}
?? ??? ??? ? 'process.env.NODE_ENV': JSON.stringify('production')
?? ??? ?},
?? ??? ?server: {
?? ??? ??? ?host: '0.0.0.0',
?? ??? ??? ?port: envConfig.VITE_PORT,
?? ??? ??? ?hmr: true, //开启热更新
?? ??? ??? ?proxy: {
?? ??? ??? ??? ?'/api': {
?? ??? ??? ??? ??? ?target: envConfig.VITE_APP_API,
?? ??? ??? ??? ??? ?ws: false,
?? ??? ??? ??? ??? ?changeOrigin: true,
?? ??? ??? ??? ??? ?rewrite: (path) => path.replace(/^\/api/, '')
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ?},
?? ??? ?productionSourceMap: false,
?? ??? ?/*打包的时候不输出map文件，减少大量体积*/
?? ??? ?build: {
?? ??? ??? ?assetsPublicPath: './',
?? ??? ??? ?target: ['es2015', "chrome52"],
?? ??? ??? ?/* 2.下面的注释打开，荣耀平板可以用，注释掉小米联想平板可以用 */
?? ??? ??? ?chunkSizeWarningLimit: 1000,
?? ??? ??? ?rollupOptions: {
?? ??? ??? ??? ?output: {
?? ??? ??? ??? ??? ?manualChunks(id) {
?? ??? ??? ??? ??? ??? ?if (id.includes('node_modules')) {
?? ??? ??? ??? ??? ??? ??? ?return id.toString().split('node_modules/')[1].split('/')[0].toString();
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?minify:'terser'
?? ??? ?},
?? ??? ?base: './',
?? ??? ?// publicPath: './',/*配置打包后的资源路径*/
?? ??? ?resolve: {
?? ??? ??? ?alias: {
?? ??? ??? ??? ?'@': `${resolve(__dirname, 'src')}`,
?? ??? ??? ??? ?'~': `${resolve(__dirname, './')}`,
?? ??? ??? ?},
?? ??? ?},
?? ??? ?css: {
?? ??? ??? ?// css预处理器
?? ??? ??? ?preprocessorOptions: {
?? ??? ??? ??? ?less: {
?? ??? ??? ??? ??? ?additionalData: `@import "${resolve(__dirname, 'src/assets/style/global.less')}";`,
?? ??? ??? ??? ??? ?modifyVars: {
?? ??? ??? ??? ??? ??? ?'primary-color': '#000000'
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?}
?? ?}
})