javascript vue.js uni-app5+app打包,vue3开发vite.config.js的配置

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'                     },                 }             }         }     } })

相关阅读

 您阅读本篇文章共花了：