vite多环境合并打包config

vite.config.base.ts 默认base文件配置

复制代码

import { resolve } from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import svgLoader from 'vite-svg-loader';
import configArcoStyleImportPlugin from './plugin/arcoStyleImport';
import { baseMap, publicDirMap, platformMap, entryMap } from './utils';

const client = process.env.CLIENT as string;

console.log('base', client);

export default defineConfig({
	base: baseMap[client],
	publicDir: publicDirMap[client],
	plugins: [
		vue(),
		vueJsx(),
		svgLoader({ svgoConfig: {} }),
		configArcoStyleImportPlugin(),
	],
	resolve: {
		alias: [
			{
				find: '@',
				replacement: resolve(__dirname, '../src'),
			},
			{
				find: 'assets',
				replacement: resolve(__dirname, '../src/assets'),
			},
			{
				find: 'vue',
				replacement: 'vue/dist/vue.esm-bundler.js', // compile template
			},
			{
				find: 'flatform',
				replacement: platformMap[client],
			},
			{
				find: 'entry',
				replacement: entryMap[client],
			},
		],
		extensions: ['.ts', '.js'],
	},
	define: {
		'process.env': process.env,
	},
	css: {
		preprocessorOptions: {
			less: {
				modifyVars: {
					hack: `true; @import (reference) "${resolve(
						'src/assets/style/reset.less',
					)}";`,
				},
				javascriptEnabled: true,
			},
		},
	},
});

其余开发环境变量配置文件

vite.config.dev.ts

import 复制代码

import eslint from 'vite-plugin-eslint';
import baseConfig from './vite.config.base';

export default mergeConfig(
	{
		mode: 'development',
		server: {
			open: true,
			port: 5075,
			fs: {
				strict: true,
			},
			proxy: {
				'/api': {
					target: 'https://pre.inifitness.com',
					changeOrigin: true,
				},
			},
		},

		plugins: [
			eslint({
				cache: false,
				include: ['src/**/*.ts', 'src/**/*.tsx', 'src/**/*.vue'],
				exclude: ['node_modules'],
			}),
		],
	},
	baseConfig,
);

vite.config.pre.ts

复制代码

import { mergeConfig } from 'vite';
import baseConfig from './vite.config.base';
import configCompressPlugin from './plugin/compress';
import configVisualizerPlugin from './plugin/visualizer';
import configArcoResolverPlugin from './plugin/arcoResolver';
import configImageminPlugin from './plugin/imagemin';
import { outDirMap } from './utils';

const client = process.env.CLIENT as string;

export default mergeConfig(
	{
		mode: 'production',
		plugins: [
			configCompressPlugin('gzip'),
			configVisualizerPlugin(),
			configArcoResolverPlugin(),
			configImageminPlugin(),
		],
		build: {
			outDir: outDirMap[client],
			rollupOptions: {
				output: {
					manualChunks: {
						arco: ['@arco-design/web-vue'],
						vue: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
						antd: ['ant-design-vue'],
					},
					assetFileNames: (assetInfo) => {
						if (assetInfo.name.endsWith('.css')) {
							return `static/css/[name].[hash].css`;
						}

						// NOTE: 先判断 ss_common再判断common
						// 自助机需要包含 ss_common 文件
						if (assetInfo.name.includes('ss_common')) {
							if (['user', 'coach'].includes(client)) {
								return 'static/img/ss_common/[name].[hash].[ext]';
							}
							return `noused/[name].[ext]`;
						}

						// 通用及组件库的图片
						if (
							assetInfo.name.includes('common') ||
							assetInfo.name.includes('ui')
						) {
							return 'static/img/ui/[name].[hash].[ext]';
						}

						if (assetInfo.name.includes(client)) {
							return 'static/img/[name].[hash].[ext]';
						}

						return `noused/[name].[ext]`;
					},
				},
			},
			chunkSizeWarningLimit: 2000,
			terserOptions: {
				compress: {
					drop_console: true,
					drop_debugger: true,
				},
			},
			minify: 'terser',
		},
	},
	baseConfig,
);

vite.config.prod.ts

复制代码

import { mergeConfig } from 'vite';
import baseConfig from './vite.config.base';
import configCompressPlugin from './plugin/compress';
import configVisualizerPlugin from './plugin/visualizer';
import configArcoResolverPlugin from './plugin/arcoResolver';
import configImageminPlugin from './plugin/imagemin';
import { outDirMap } from './utils';

const client = process.env.CLIENT as string;

export default mergeConfig(
	{
		mode: 'production',
		plugins: [
			configCompressPlugin('gzip'),
			configVisualizerPlugin(),
			configArcoResolverPlugin(),
			configImageminPlugin(),
		],
		build: {
			outDir: outDirMap[client],
			rollupOptions: {
				output: {
					manualChunks: {
						vue: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
						arco: ['@arco-design/web-vue'],
						antd: ['ant-design-vue'],
					},
					assetFileNames: (assetInfo) => {
						if (assetInfo.name.endsWith('.css')) {
							return `static/css/[name].[hash].css`;
						}

						// NOTE: 先判断 ss_common再判断common
						// 自助机需要包含 ss_common 文件
						if (assetInfo.name.includes('ss_common')) {
							if (['user', 'coach'].includes(client)) {
								return 'static/img/ss_common/[name].[hash].[ext]';
							}
							return `noused/[name].[ext]`;
						}

						// 通用及组件库的图片
						if (
							assetInfo.name.includes('common') ||
							assetInfo.name.includes('ui')
						) {
							return 'static/img/ui/[name].[hash].[ext]';
						}

						if (assetInfo.name.includes(client)) {
							return 'static/img/[name].[hash].[ext]';
						}

						return `noused/[name].[ext]`;
					},
				},
			},
			chunkSizeWarningLimit: 2000,
			minify: 'terser',
			terserOptions: {
				compress: {
					drop_console: true,
					drop_debugger: true,
				},
			},
		},
	},
	baseConfig,
);

使用配置文件

复制代码

  "scripts": {
    "dev:user": "cross-env CLIENT=user vite --config ./config/vite.config.dev.ts --host",
    "dev:motion": "cross-env CLIENT=motion vite --config ./config/vite.config.dev.ts --host",
    "dev:coach": "cross-env CLIENT=coach vite --config ./config/vite.config.dev.ts --host",
    "debug:user": "cross-env CLIENT=user vite --config ./config/vite.config.dev.ts --host --mode debug",
    "debug:coach": "cross-env CLIENT=coach vite --config ./config/vite.config.dev.ts --host --mode debug",
    "pre:user": "cross-env CLIENT=user vite build --config ./config/vite.config.pre.ts --mode pre",
    "pre:motion": "cross-env CLIENT=motion vite build --config ./config/vite.config.pre.ts --mode pre",
    "pre:coach": "cross-env CLIENT=coach vite build --config ./config/vite.config.pre.ts --mode pre",
    "build:user": "cross-env CLIENT=user vite build --config ./config/vite.config.prod.ts && npx rimraf ./ss_user/noused",
    "build:coach": "cross-env CLIENT=coach vite build --config ./config/vite.config.prod.ts  && npx rimraf ./ss_coach/noused",
    "build:motion": "cross-env CLIENT=motion vite build --config ./config/vite.config.prod.ts && npx rimraf ./motion/noused",
    "report": "cross-env REPORT=true npm run build:user",
    "preview": "npm run build:user && vite preview --host",
    "type:check": "vue-tsc --noEmit --skipLibCheck",
    "lint-staged": "npx lint-staged && npm run type:check",
    "prepare": "husky"
  },