uniapp Vue2升级Vue3使用Vite分包

uniapp Vue2使用webpack打包配置

根目录下创建vue.config.js文件

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin') //最新版本copy-webpack-plugin插件暂不兼容，推荐v5.0.0

let filePath = ''
let Timestamp = ''
//编译环境判断,判断是否H5环境
if (process.env.UNI_PLATFORM === 'h5') {
  filePath = 'static/js/'; //打包文件存放文件夹路径
  Timestamp = '.' + new Date().getTime();//时间戳
 
}

module.exports = {
	configureWebpack: {
		output: { // 输出重构  打包编译后的 文件目录 文件名称 【模块名称.时间戳】
		    filename: `${filePath}[name]${Timestamp}.js`,
		    chunkFilename: `${filePath}[name]${Timestamp}.js`
		},
		plugins: [
			// 自定义分包静态资源目录
			new CopyWebpackPlugin([{
					from: path.join(__dirname, '/static_sub'),
					to: path.join(__dirname + '/unpackage/', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, '/')
				}
			])
		]
	},
	chainWebpack: (config) => {
		// 发行或运行时启用了压缩时会生效
		config.optimization.minimizer('terser').tap((args) => {
			const compress = args[0].terserOptions.compress
			// 非 App 平台移除 console 代码(包含所有 console 方法，如 log,debug,info...)
			compress.drop_console = true
			compress.pure_funcs = [
				'__f__', // App 平台 vue 移除日志代码
				// 'console.debug' // 可移除指定的 console 方法
			]
			return args
		})
	}
}

 

uniapp Vue3使用Vite打包配置

根目录下创建vite.config.js文件

import path from 'path'
import fs from 'fs-extra'
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

function copyFile() {
	return {
		enforce: 'post',
		async writeBundle() {
			await fs.copy(
				path.join(__dirname, '/static_sub'),
				path.join(__dirname + '/unpackage/', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, '/')
			)
		},
	}
}

let filePath = ''
let Timestamp = ''
//编译环境判断,判断是否H5环境
if (process.env.UNI_PLATFORM === 'h5') {
  filePath = 'assets/'; //打包文件存放文件夹路径
  Timestamp = '.' + new Date().getTime();//时间戳
}

export default defineConfig({
	plugins: [
		uni(),
		copyFile()
	],
	build: {
		terserOptions: {
			compress: {
				// 发布时删除 console
				drop_console: true,
			},
		},
		rollupOptions: {
			output:{ // 输出重构  打包编译后的 文件目录 文件名称 【模块名称.时间戳】
				// 入口文件名
				entryFileNames: `${filePath}[name]${Timestamp}.js`,
				// 块文件名
				chunkFilename: `${filePath}[name]${Timestamp}.js`,
				// 资源文件名 css 图片等等
				assetFileNames: `${filePath}[name]${Timestamp}.[ext]`
			}
		}
	}
})