vue cli2.0+ 和 vue cli3.0 用户无感发布版本配置部署
2024-02-08 20:56:33
0.前言
在前端开发中，我们需要经常进行版本发布。传统的方式是手动将代码上传到服务器，然后重启服务器。这不仅繁琐，而且容易出错。
现在，我们有一种新的发布方式，叫做无感发布。无感发布是指在不影响用户体验的情况下，将新版本代码发布到服务器。这种方式的好处是，用户不需要重新加载页面，就能看到新版本的内容。
1. 什么是无感发布
无感发布，顾名思义，就是用户在不知不觉中，已经看到了新的页面。无感发布需要借助服务端来实现。无感发布的一般流程如下：
- 开发人员将新版本代码提交到代码仓库。
- 服务器自动检测到代码仓库有新的提交。
- 服务器将新版本代码拉取到本地。
- 服务器重新编译代码。
- 服务器将新版本代码部署到线上。
2. vue cli2.0+ 的无感发布
vue cli2.0+ 的无感发布，需要用到 webpack 的 hash 功能。webpack 的 hash 功能可以为每个文件生成一个唯一的 hash 值。当文件内容发生改变时，hash 值也会发生改变。
webpackhash有三种方式:
- hash 是跟整个项目的构建相关，只要项目里有文件更改，整个项目构建的hash值都会更改，并且全部文件都共用相同的hash值。
- chunkhash 是跟一个chunk里的具体文件相关，当chunk中的某个文件更改，则此chunkhash会更改，chunk中的其他文件不会受到影响。
- contenthash 是跟一个文件的具体内容相关，当文件的具体内容更改时，contenthash才会更改。
在这里我们选择chunkhash来生成hash值。
首先，在 vue.config.js 文件中，配置 webpack 的 hash 功能。
module.exports = {
configureWebpack: {
output: {
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].js',
}
}
}
其次，在 package.json 文件中，配置 "deploy" 脚本。
{
"scripts": {
"deploy": "vue-cli-service build --mode production && rsync -av --delete dist/ user@host:/path/to/deploy/"
}
}
最后，在服务器上，配置一个定时任务，定期执行 "deploy" 脚本。
3. vue cli3.0 的无感发布
vue cli3.0 的无感发布，需要用到 webpack 的 splitChunks 和 runtimeChunk 功能。splitChunks 功能可以将公共代码抽取到单独的文件中。runtimeChunk 功能可以将 webpack 的运行时代码抽取到单独的文件中。
首先，在 vue.config.js 文件中，配置 webpack 的 splitChunks 和 runtimeChunk 功能。
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: 'commons',
chunks: 'initial',
minChunks: 2,
},
vendor: {
test: /node_modules/,
chunks: 'initial',
name: 'vendor',
priority: 10,
enforce: true,
},
},
},
runtimeChunk: true,
}
}
}
其次，在 package.json 文件中，配置 "deploy" 脚本。
{
"scripts": {
"deploy": "vue-cli-service build --mode production && rsync -av --delete dist/ user@host:/path/to/deploy/"
}
}
最后，在服务器上，配置一个定时任务，定期执行 "deploy" 脚本。
4. 无感发布的注意事项
在使用无感发布时，需要特别注意以下几点：
- 需要使用 nginx 或 Apache 等反向代理服务器。
- 需要配置反向代理服务器的缓存策略。
- 需要配置反向代理服务器的 gzip 压缩。
- 需要配置反向代理服务器的 HTTPS。
5. 结语
无感发布是一种非常方便的发布方式。它可以大大提高开发效率，并提高用户体验。如果您还没有使用无感发布，那么强烈建议您尝试一下。
