vue.config.js配置

整体配置

const build7z = true, // npm run build时是否自动生成7z压缩包
	baseURL = 'http://'，
	devPort=5502
	
module.exports = {
	// 基本路径
	baseUrl: process.env.NODE_ENV === 'production' ?'./' :'./',
	// 输出文件目录
	outputDir:'dist',
	// 用于嵌套生成的静态资产（js,css,img,fonts）目录
	assetsDir: '',
	// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
	indexPath: "index.html", // 默认: 'index.html'
	// 构建多页时使用
	pages: undefined,
	// eslint-loader是否在保存的时候检查
	lintOnSave:true,
	// 是否使用包含运行时编译器的Vue核心的构建
	runtimeCompiler: true,
	// 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
	transpileDependencies:[],
	// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
	productionSourceMap: false,
	// webpack配置 // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
	configureWebpack() {
		return {
			resolve: {
			// 文档路径①
			alias: {
				"~": resolve("."),
				"@": resolve("src")
				}
			 }
		};
	},
	// 通过 webpack-chain 维护的，修改一些高级配置，比如修改，添加，替换loader, 使用、修改插件
	chainWebpack(config) {
		// 清理所有默认入口配置
		// config.entryPoints.clear();
		// 增加一个入口main
		// config.entry("main").add("./src/main.js");
		config.resolve.alias // 等同于①
			// 设置别名
			.set("~", resolve("."))
			.set("@", resolve("src"));
		// .delete("base"); 删掉指定的别名
		// .clear()  把全部别名都删掉;config
		config.module.rule("svg").exclude.add(resolve("src/icon"));// 添加存放svg的文件夹路径
		config.module
			.rule("icons") //配置rule规则里面新增的icons规则
			.test(/\.svg$/) //icons规则里匹配到.svg结尾的文件
			.include.add(resolve("src/icon")) //包含src/icons下的.svg文件
			.end()
			.use("svg-sprite-loader")
			.loader("svg-sprite-loader")
			.options({ symbolId: "vab-icon-[name]" }) //class名
			.end();
		config.when(process.env.NODE_ENV === "production", (config) => {
			// 压缩包
			if (build7z)
				config.plugin("fileManager").use(FileManagerPlugin, [
					{
						events: {
							onEnd: {
								archive: [
									{
										source: `./${outputDir}`,
										destination: `./${zipName}.zip`
									}
								]
							}
						}
					}
				]);
		});
	},
	// css相关配置
	css: {
		// 启用 CSS modules
		// modules: false,
		// 是否将组件中的 CSS 提取至一个独立的 CSS 文件中，生产环境下是 true，开发环境下是 false
		extract: process.env.NODE_ENV === "production",
		// 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。
		sourceMap: false,
		// css预设器配置项
		loaderOptions: {
			// varibles mixin 全局注入
			sass: {
				additionalData(content, loaderContext) {
					const { resourcePath, rootContext } = loaderContext;
					const relativePath = path.relative(rootContext, resourcePath);
					if (
						relativePath.replace(/\\/g, "/") !==
						"src/styles/variables/variables.scss"
					) {
						return (
							`@use "sass:math"; @import src/styles/variables/variables.scss";` +
							content
						);
					}

					return content;
				}
			}
		}
	},
	// webpack-dev-server 相关配置
	devServer: {
    host: 'localhost',
    // hot: true, // 用于设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）。默认：true
    port: devPort,
    disableHostCheck: true, //可以被外网访问
    // open: false, //配置自动启动浏览器，默认：false
    // inline: true, // 用于设置代码保存时是否自动刷新页面。默认：true
    noInfo: false,
    overlay: {
      warnings: true,
      errors: true,
    },
    proxy: {
	  // 设置代理
      ['/api']: {
        target: baseURL, //服务端接口地址
        ws: true,
        changeOrigin: true,
        logLevel: 'debug',
        pathRewrite: {
         // 重写路径，替换请求地址中的指定路径
          '^/api': '/api/',
        },
      },
    },
	},
	// PWA 插件相关配置
	pwa: {},
	// 第三方插件配置
	pluginOptions: {
		// ...
	}
};