vue.config.js里面的devserver如何配置
作者：Flamingo_huohuo
本文介绍了vue.config.js中devServer的常见配置方式,包括基本配置、代理配置、热模块替换、静态资源服务、HTTPS配置、多代理配置以及其他配置项,帮助开发者根据项目需求进行定制
vue.config.js的devserver配置方式
以下是 vue.config.js 中 devServer 的常见配置方式，以及不同配置项的解释和使用场景：
1. 基本配置
在 Vue 项目中，vue.config.js 是一个可选的配置文件，用于自定义 Vue CLI 的内部 Webpack 配置。
以下是一个简单的 devServer 配置示例：
module.exports = {
devServer: {
port: 8080, // 开发服务器的端口号
open: true, // 项目启动时自动打开浏览器
overlay: {
warnings: false,
errors: true // 在浏览器中显示错误信息
}
}
};解释：
port：指定开发服务器运行的端口号。如果不设置，默认为 8080。open：设置为true时，项目启动时会自动打开浏览器并访问开发服务器的页面。overlay：控制是否在浏览器页面上覆盖显示警告和错误信息。将errors设置为true会在页面上显示编译错误，方便开发时快速定位问题。
2. 代理配置
使用 devServer 配置代理是解决开发环境中跨域问题的常用方法。
假设你需要将 /api 开头的请求代理到 http://localhost:3000 上的后端服务器，可以这样配置：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000', // 目标服务器地址
changeOrigin: true, // 修改请求头中的 Origin 信息
pathRewrite: {
'^/api': '' // 重写请求路径，将 /api 替换为空
}
}
}
}
};解释：
proxy：设置请求代理。'/api'：匹配以/api开头的请求路径。target：将请求代理到的目标服务器地址。changeOrigin：将请求头中的Origin字段修改为目标服务器的地址，有助于绕过某些服务器的同源策略限制。pathRewrite：重写请求路径，这里将/api前缀去掉，使请求路径符合后端 API 的实际情况。
3. 热模块替换（HMR）
启用热模块替换可以在不刷新页面的情况下更新代码，提升开发体验：
module.exports = {
devServer: {
hot: true, // 启用热模块替换
hotOnly: true // 只使用热更新，不刷新页面
}
};解释：
hot：启用热模块替换。hotOnly：当热模块替换失败时，不刷新页面，避免页面刷新导致的数据丢失或状态重置。
4. 静态资源服务
可以配置 devServer 来处理静态资源服务：
module.exports = {
devServer: {
contentBase: './public', // 静态资源的目录
watchContentBase: true // 监听静态资源目录的变化
}
};解释：
contentBase：指定静态资源的目录，默认为public目录。watchContentBase：设置为true时，当静态资源目录中的文件发生变化时，开发服务器会重新加载。
5. 启用 HTTPS
如果需要在开发环境中使用 HTTPS，可以配置 devServer 如下：
const fs = require('fs');
const path = require('path');
module.exports = {
devServer: {
https: {
key: fs.readFileSync(path.join(__dirname, 'key.pem')), // 私钥文件
cert: fs.readFileSync(path.join(__dirname, 'cert.pem')) // 证书文件
}
}
};解释：
https：使用 HTTPS 协议，需要提供私钥和证书文件。
6. 配置多个代理
如果你需要将不同的请求代理到不同的后端服务器，可以使用多个代理配置：
module.exports = {
devServer: {
proxy: {
'/api1': {
target: 'http://localhost:3001',
changeOrigin: true
},
'/api2': {
target: 'http://localhost:3002',
changeOrigin: true
}
}
}
};7. 其他配置
还可以配置其他 devServer 选项，如 headers 用于设置响应头，compress 用于启用 Gzip 压缩：
module.exports = {
devServer: {
headers: {
'Access-Control-Allow-Origin': '*' // 允许跨域请求
},
compress: true // 启用 Gzip 压缩
}
};心得：
vue.config.js 中的 devServer 配置项非常灵活，可以根据开发需求进行各种定制。
以下是一个综合的 vue.config.js 示例：
const fs = require('fs');
const path = require('path');
module.exports = {
devServer: {
port: 8080,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
hot: true,
hotOnly: true,
contentBase: './public',
watchContentBase: true,
https: {
key: fs.readFileSync(path.join(__dirname, 'key.pem')),
cert: fs.readFileSync(path.join(__dirname, 'cert.pem'))
},
headers: {
'Access-Control-Allow-Origin': '*'
},
compress: true
}
};总结
以上就是 vue.config.js 中 devServer 的常见配置，你可以根据项目的实际需求进行选择和修改，以满足开发过程中的不同需求。
这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。