const { defineConfig } = require('@vue/cli-service');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
const ElementPlus = require('unplugin-element-plus/webpack');

module.exports = defineConfig({
	transpileDependencies: true,
	devServer: {
		proxy: {
			'/api': {
				target: 'http://localhost:8080',
				changeOrigin: true,
				pathRewrite: { '^/api': '' },
			},
		},
	},

	chainWebpack: config => {
		config.plugin('define').tap(definitions => {
			Object.assign(definitions[0], {
				__VUE_OPTIONS_API__: 'true',
				__VUE_PROD_DEVTOOLS__: 'false',
				__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
			});
			return definitions;
		});
	},
	css: {
		loaderOptions: {
			scss: {
				additionalData: `@use "~@/assets/css/index.scss" as *; @use "~@/assets/css/mixin/index.scss";`,
			},
		},
	},
	configureWebpack: {
		plugins: [
			AutoImport({
				resolvers: [ElementPlusResolver()],
			}),
			// Components({
			// 	resolvers: [ElementPlusResolver()],
			// }),
			ElementPlus({
				useSource: true,
			}),
		],
	},
});