vue项目中vue.config.js文件的介绍

vue.config.js 是一个可选的配置文件，如果项目的根目录中没有这个文件，则 Vue CLI 会使用默认的配置。这个文件的主要目的是为了让开发者能够调整 Vue CLI 生成的项目的默认配置。

vue.config.js 应该导出一个包含了配置选项的对象。这些配置选项包括但不限于：

• publicPath：指定部署应用时的基本 URL。
• outputDir：指定输出目录（dist）。
• assetsDir：指定除 index.html 以外的静态资源目录（相对于 outputDir）。
• indexPath：指定生成的 index.html 的输出路径（相对于 outputDir）。
• lintOnSave：是否在保存的时候检查并修复 lint 错误。
• chainWebpack：一个高级选项，允许你使用 webpack-chain 进行更细粒度的修改。
• configureWebpack：如果项目的 webpack 配置需要进行更细粒度的修改，则使用这个函数。
• devServer：修改 webpack-dev-server 配置。
• css、parallel、pluginOptions 等其他配置。

这个文件通常位于项目的根目录下，与 package.json 文件同级。它使得开发者能够灵活地定制 Vue CLI 生成的项目，以满足特定的项目需求或工作流程。

例如，你可以通过 vue.config.js 文件来修改项目的输出目录，或者调整 webpack-dev-server 的配置，以便在开发过程中使用特定的代理设置或端口号。

javascript复制代码

	// vue.config.js
	module.exports = {
	outputDir: 'dist-custom', // 修改输出目录
	devServer: {
	port: 8080, // 修改开发服务器端口
	proxy: {
	'/api': {
	target: 'http://example.com', // 设置代理
	changeOrigin: true,
	pathRewrite: {
	'^/api': ''
	}
	}
	}
	}
	}

在这个例子中，vue.config.js 文件修改了项目的输出目录为 dist-custom，并将开发服务器的端口设置为 8080。同时，它还设置了一个代理，将所有以 /api 开头的请求代理到 http://example.com。