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