場景
前端開發需要確認已發佈,測試是否成功發佈本次項目代碼。
解決方案
在HTML中寫一段特殊標記即可(即版本號),那麼這個版本號應該放在哪裏呢?
在sessionStorage,或者localStorage中添加一項記錄,這確實可以達到標記的目的。
但在這裏推薦一個較爲規範的版本號添加方案
在HTML5中,meta標籤中的屬性值可以很好的解決標記版本問題
在index.html中定義如下
<meta name="revised" content="定義頁面的最新版本"/>
發佈後查看源代碼,在源代碼中看到對應發佈的版本號,即說明本次代碼發佈成功!
到這裏已經解決版本號的問題了。
下面介紹的是vue項目打包動態更新版本號
打包時僅修改package.json文件中的version對應值即可。
由於vue的最新版本已經集成了htmlWebpackPlugin,所以我們只需要添加在根目錄一個名爲vue.config.js的文件
重點是在index屬性下添加:
meta: {revised: `版本號, ${packageInfo.version}`}
具體設置可以參考相關文檔,相關配置如下:
const packageInfo = require('./package.json'); // 這裏拿到package.json的相關信息
module.exports = {
pages: {
index: {
// page 的入口
entry: 'src/main.js',
// 模板來源
template: 'public/index.html',
// 在 dist/index.html 的輸出
filename: 'index.html',
// 當使用 title 選項時,
// template 中的 title 標籤需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: '頁面title',
// 在這個頁面中包含的塊,默認情況下會包含
// 提取出來的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index'],
meta: {revised: `版本號, ${packageInfo.version}`}
},
// 當使用只有入口的字符串格式時,
// 模板會被推導爲 `public/subpage.html`
// 並且如果找不到的話,就回退到 `public/index.html`。
// 輸出文件名會被推導爲 `subpage.html`。
// subpage: 'src/subpage/main.js'
}
}
記錄到這裏完結了,最後祝願大家521快樂!