aizuda-web-vue3/vite.config.ts

import { defineConfig, loadEnv, ConfigEnv, UserConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import svgLoader from 'vite-svg-loader'
// import eslintPlugin from 'vite-plugin-eslint'
import { createHtmlPlugin } from 'vite-plugin-html'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'
import path from 'path'
import pkg from './package.json'
import dayjs from 'dayjs'
import { wrapperEnv } from './build/getEnv'
const isProduction = process.env.NODE_ENV === 'production'

const { dependencies, devDependencies, name, version } = pkg
const __APP_INFO__ = {
	pkg: { dependencies, devDependencies, name, version },
	lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
}

const examplePlugin = () => {
	let config

	return {
		name: 'custom-vuedraggableAndSortable',
		transform(code, id) {
			/*eslint-disable*/
			if (isProduction) {
				if (/vuedraggable\.js/.test(id)) {
					return code.replace('this._sortable = new Sortable(targetDomElement, sortableOptions);', (...e) => {
						return `Sortable.mount($attrs.plugins || []);
            ${e[0]}`
					})
				}
				if (/sortablejs/.test(id)) {
					return code.replace(`plugins.forEach(function (p) {
      if (p.pluginName === plugin.pluginName) {
        throw "Sortable: Cannot mount plugin ".concat(plugin.pluginName, " more than once");
      }
    });
    plugins.push(plugin);`, (...e) => {
						return `if (!plugins.filter(e => e.pluginName === plugin.pluginName).length) {
          window.plugins = plugins;
			    plugins.push(plugin);}`
					})
				}
			} else {
				if (/vuedraggable/.test(id)) {
					let result = code.replace('this._sortable = new external_commonjs_sortablejs_commonjs2_sortablejs_amd_sortablejs_root_Sortable_default.a(targetDomElement, sortableOptions);', (...e) => {
						return `external_commonjs_sortablejs_commonjs2_sortablejs_amd_sortablejs_root_Sortable_default.a.mount($attrs.plugins || []);
  ${e[0]}`
					})
					result = result.replace(`plugins.forEach(function(p) {
          if (p.pluginName === plugin.pluginName) {
            throw "Sortable: Cannot mount plugin ".concat(plugin.pluginName, " more than once");
          }
        });
        plugins.push(plugin);`, (...e) => {
						return `if (!plugins.filter(e => e.pluginName === plugin.pluginName).length) {
          window.plugins = plugins;
			    plugins.push(plugin);}`
					})
					return result
				}
			}
			/*eslint-disable*/
		}
	}
}

// https://vitejs.dev/config/
export default defineConfig(({ mode /*command,*/ }: ConfigEnv): UserConfig => {
	// if (command === 'serve') {
	//   return {
	//     // serve 独有配置
	//   }
	// } else {
	//   return {
	//     // build 独有配置
	//   }
	// }
	const process_cwd = process.cwd()
	// 获取 .env 环境配置文件
	const env = loadEnv(mode, process_cwd)
	const viteEnv = wrapperEnv(env)

	return {
		base: viteEnv.VITE_PUBLIC_PATH,
		resolve: {
			// Vite路径别名配置
			alias: {
				'@': path.resolve(__dirname, './src'),
				'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
				'@ER': path.resolve(__dirname, './src/components/packages'),
				vuedraggable: isProduction ? 'vuedraggable/src/vuedraggable' : 'vuedraggable'
			},
			extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.vue', '.json'] // 默认 ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
		},
		define: {
			__APP_INFO__: JSON.stringify(__APP_INFO__)
		},
		css: {
			devSourcemap: true,
			preprocessorOptions: {
				scss: {
					additionalData: `@import "@/styles/variables.scss";`
				}
			}
		},
		server: {
			host: '0.0.0.0',
			port: viteEnv.VITE_PORT,
			open: viteEnv.VITE_OPEN,
			cors: true,
			// Load proxy configuration from .env.development
			proxy: {}
		},
		plugins: [
			// vue支持
			vue(),
			// JSX支持
			vueJsx({
				// 默认支持  .[jt]sx  .vue 和 .js 需要支持 jsx 写法 需要 配置
				include: /\.[jt]sx$/ // |\.vue$
			}),
			// // esLint 报错信息显示在浏览器界面上
			// eslintPlugin(),
			// name 可以写在 script 标签上
			vueSetupExtend({}),
			// 注入变量到 html 文件
			createHtmlPlugin({
				inject: {
					data: { title: viteEnv.VITE_APP_TITLE }
				}
			}),
			// 使用 svg 图标
			createSvgIconsPlugin({
				// 指定需要缓存的图标文件夹
				iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
				// 指定symbolId格式
				symbolId: 'icon-[dir]-[name]'
			}),
			svgLoader(),
			examplePlugin()
		]
	}
})