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 的配置，以便在开发过程中使用特定的代理设置或端口号。

// 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。

到此这篇关于vue项目中vue.config.js文件的介绍的文章就介绍到这了,更多相关vue vue.config.js文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！