vue项目打包配置

实现打包后如图所示效果

1、在项目根目录创建vue.config.js文件：

// 打包配置
module.exports = {
	publicPath: "/", //公共路径(必须有的)
	outputDir: "dist", //输出文件目录
	assetsDir: "pc", // //静态资源文件名称
	// assetsDir: "tg", // //静态资源文件名称
	productionSourceMap: false, //去除打包后js的map文件
	lintOnSave: false,
	runtimeCompiler: false,
	//去掉console
	configureWebpack: (config) => {
		// 判断为生产模式下，因为开发模式我们是想保存console的
		if (process.env.NODE_ENV === "production") {
			config.optimization.minimizer.map((arg) => {
				const option = arg.options.terserOptions.compress;
				option.drop_console = true; // 打开开关
				return arg;
			});
		}
	},
	// 解决跨域
	// devServer: {
	// 	//以上的ip和端口是我们本机的;下面为需要跨域的
	// 	proxy: { //配置跨域
	// 		'/api': {
	// 			target: " ", //这里后台的地址模拟的;应该填写你们真实的后台接口
	// 			/* ws: true, */
	// 			changOrigin: true, //允许跨域
	// 			// pathRewrite: {
	// 			// 	'^/api': '' //请求的时候使用这个api就可以
	// 			// }
	// 		}
	// 	}
	// }
}

3、命令运行npm run build
以上做法就可以打包出指定的路径，文件夹了。