qnAdmin/vue.config.js

/**

 * @description vue.config.js全局配置
 */
const path = require("path");
const {
	baseURL,
	publicPath,
	assetsDir,
	outputDir,
	lintOnSave,
	transpileDependencies,
	title,
	abbreviation,
	devPort,
	providePlugin,
	build7z,
	donation,
} = require("./src/config/settings");
const {
	webpackBarName,
	webpackBanner,
	donationConsole,
} = require("zx-layouts");

if (donation) donationConsole();
const {
	version,
	author
} = require("./package.json");
const Webpack = require("webpack");
const WebpackBar = require("webpackbar");
const FileManagerPlugin = require("filemanager-webpack-plugin");
const dayjs = require("dayjs");
const date = dayjs().format("YYYY_M_D");
const time = dayjs().format("YYYY-M-D HH:mm:ss");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["html", "js", "css", "svg"];
process.env.VUE_APP_TITLE = title || "vue-admin-beautiful";
process.env.VUE_APP_AUTHOR = author || "chuzhixin";
process.env.VUE_APP_UPDATE_TIME = time;
process.env.VUE_APP_VERSION = version;

const resolve = (dir) => {
	return path.join(__dirname, dir);
};

const mockServer = () => {
	if (process.env.NODE_ENV === "development") {
		return require("./mock/mockServer.js");
	} else {
		return "";
	}
};

module.exports = {
	publicPath,
	assetsDir,
	outputDir,
	lintOnSave,
	transpileDependencies,
	devServer: {
		hot: true,
		port: devPort,
		open: true,
		noInfo: false,
		overlay: {
			warnings: true,
			errors: true,
		},
		// 注释掉的地方是前端配置代理访问后端的示例
		proxy: {
			'/apiAdmin': {
				target: `https://api1.liuniukj.com`,
				ws: true,
				changeOrigin: true,
				pathRewrite: {
					"/apiAdmin": "",
				},
			},
		},
		after: mockServer(),
	},
	configureWebpack() {
		return {
			resolve: {
				alias: {
					"@": resolve("src"),
					"*": resolve(""),
				},
			},
			plugins: [
				new Webpack.ProvidePlugin(providePlugin),
				new WebpackBar({
					name: webpackBarName,
				}),
			],
		};
	},
	chainWebpack(config) {
		config.resolve.symlinks(true);
		config.module
			.rule("svg")
			.exclude.add(resolve("src/icon/remixIcon"))
			.add(resolve("src/icon/colorfulIcon"))
			.end();

		config.module
			.rule("remixIcon")
			.test(/\.svg$/)
			.include.add(resolve("src/icon/remixIcon"))
			.end()
			.use("svg-sprite-loader")
			.loader("svg-sprite-loader")
			.options({
				symbolId: "remix-icon-[name]"
			})
			.end();

		config.module
			.rule("colorfulIcon")
			.test(/\.svg$/)
			.include.add(resolve("src/icon/colorfulIcon"))
			.end()
			.use("svg-sprite-loader")
			.loader("svg-sprite-loader")
			.options({
				symbolId: "colorful-icon-[name]"
			})
			.end();

		config.when(process.env.NODE_ENV === "development", (config) => {
			config.devtool("source-map");
		});

		config.when(process.env.NODE_ENV !== "development", (config) => {
			config.performance.set("hints", false);
			config.devtool("none");
			config.optimization.splitChunks({
				chunks: "all",
				cacheGroups: {
					libs: {
						name: "vue-admin-beautiful-pro-libs",
						test: /[\\/]node_modules[\\/]/,
						priority: 10,
						chunks: "initial",
					},
					elementUI: {
						name: "vue-admin-beautiful-pro-element-ui",
						priority: 20,
						test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
					},
				},
			});
			config
				.plugin("banner")
				.use(Webpack.BannerPlugin, [`${webpackBanner}${time}`])
				.end();
			config
				.plugin("compression")
				.use(CompressionWebpackPlugin, [{
					filename: "[path].gz[query]",
					algorithm: "gzip",
					test: new RegExp(
						"\\.(" + productionGzipExtensions.join("|") + ")$"
					),
					threshold: 8192,
					minRatio: 0.8,
				}, ])
				.end();
		});

		if (build7z) {
			config.when(process.env.NODE_ENV === "production", (config) => {
				config
					.plugin("fileManager")
					.use(FileManagerPlugin, [{
						onEnd: {
							delete: [`./${outputDir}/video`, `./${outputDir}/data`],
							archive: [{
								source: `./${outputDir}`,
								destination: `./${outputDir}/${abbreviation}_${outputDir}_${date}.7z`,
							}, ],
						},
					}, ])
					.end();
			});
		}
	},
	runtimeCompiler: true,
	// 是否开启映射
	productionSourceMap:process.env.NODE_ENV === "production"? true:false,
	css: {
		requireModuleExtension: true,
		sourceMap: true,
		loaderOptions: {
			scss: {
				additionalData(content, loaderContext) {
					const {
						resourcePath,
						rootContext
					} = loaderContext;
					const relativePath = path.relative(rootContext, resourcePath);
					if (
						relativePath.replace(/\\/g, "/") !== "src/config/variables.scss"
					) {
						return '@import "~@/config/variables.scss";' + content;
					}
					return content;
				},
			},
		},
	},
};