【攻略】详解vue-cli脚手架build目录中的dev-server.js配置文件
在Vue.js的项目中,build目录中的dev-server.js文件负责创建一个开发服务器,来帮助我们优化开发阶段的开发体验。该文件中包含了很多重要的配置项,接下来我们将详细讲解这些配置项。
dev-server.js文件的基本结构
首先,我们来看一下dev-server.js文件的基本结构:
const webpack = require('webpack')
const merge = require('webpack-merge')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const baseWebpackConfig = require('./webpack.base.conf')
const utils = require('./utils')
const config = require('../config')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
mode: 'development',
devtool: config.dev.devtool,
devServer: {
clientLogLevel: 'warning',
// ...
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
// ...
]
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
process.env.PORT = port
devWebpackConfig.devServer.port = port
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
// ...
}))
resolve(devWebpackConfig)
}
})
})
从代码中可以看到,该文件中引入了许多node模块和其他文件的模块,接下来我们将对这些引入的模块和配置对象进行详解。
引入的模块
- webpack: webpack是一个现代JavaScript应用程序的静态模块打包器。
- webpack-merge: 合并wp配置的一个工具。建议先了解 require('./webpack.base.conf') 及下文中的merge。
- FriendlyErrorsPlugin: 乐于助人的报错信息展示插件,能以更清晰的形式描述webpack编译时出错的位置的详细信息。
config.dev.*
在config目录中我们可以看到一个dev.env.js和dev.js文件,这两个文件会在dev-server.js文件中被引用,其作用如下:
- config.dev.env: 开发环境中使用的配置项,如开发环境中运行的地址baseUrl、node环境等。
- config.dev: 开发环境的webpack配置项,如启动的服务器端口号port等。
devServer配置
除了引入的模块和config.dev.之外,该文件的主要配置是在devWebpackConfig对象下进行的。
而devWebpackConfig下最主要的配置就是devServer:
devServer: {
clientLogLevel: 'warning', // 告诉服务器记录级别
...
}
devServer的常用配置项
contentBase
: 告诉服务器从哪里提供内容,默认情况下是从项目根目录提供内容。host
: 指定使用一个 host。默认是 localhost。如果你希望服务器外部可访问,指定如下:0.0.0.0
。port
: 端口号。proxy
: 配置代理跨域。compress
: 一切服务都启用gzip 压缩。historyApiFallback
: 任意的 404 响应可以提供为 index.html 页面的内容。用来解决vue-router在history模式下刷新页面会报404的问题。hot
: 启用 webpack 的模块热替换特性。https
: 启用 https。noInfo
: 关闭所有打印到控制台的无用信息。overlay
: 在浏览器中显示编译时的错误信息。publicPath
: 访问资源加前缀。quiet
: 如果你不想让 dev server 向控制台输出任何内容,选项可以开启。watchOptions
: 监控文件改动时候,delay多久重新打包,不会每按一个键都联网请求数据,可以提高性能。
最佳实践
在实际开发中,我们可能还要对devServer进行其他的配置。以下是两个常用的示例:
1. webpack-dev-server启用Gzip压缩
devServer: {
after(app, server) {
app.use(
require('compression')({
algorithm: 'gzip',
threshold: 10240,
minRatio: 0.8
})
)
}
}
这里我们使用了compression模块来启用Gzip压缩,其中的参数说明如下:
algorithm
: 设置压缩算法threshold
: 只有大小大于该值的资源会被处理minRatio
: 只有压缩率小于这个值的资源才会被处理
2. 解决在热更新下vue-router刷新页面会出现404错误的问题
在启用热更新(hot)时,会出现vue-router中hash模式下,路由正常跳转,但刷新页面会出现404错误的问题。这是因为热更新被加入进来后,对于路由的跳转是不触发整个页面的重新渲染的,所以在刷新页面时,浏览器会请求当前路径下的index.html文件,但此文件不存在,所以出现404错误。
解决这个问题的方法是在devServer的historyApiFallback选项中将rewrites配置为空:
devServer: {
historyApiFallback: {
rewrites: [
{
from: /.*/,
to: path.posix.join(config.dev.assetsPublicPath, 'index.html'),
},
],
},
},
在配置文件中加入这一行配置后,热更新下的vue-router引用本地文件完成,刷新页面时也不会出现404错误。
总结
以上就是对vue-cli脚手架build目录中的dev-server.js配置文件进行的详细讲解。在实际项目中,配置项会因项目而异,但是对于一些常用的配置,我们需要熟练掌握。通过学习此文,相信读者已经对于dev-server.js文件的基本结构以及常用配置有了理解,并可根据实际需求对此文件进行修改。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解vue-cli脚手架build目录中的dev-server.js配置文件 - Python技术站