フロントエンドプロジェクトのバージョン番号位置、vueパッケージにバージョン番号を追加

1842 ワード

シーン
フロントエンド開発では、パブリッシュされたことを確認し、今回のプロジェクトコードのパブリッシュに成功したかどうかをテストする必要があります.
ソリューション
HTMLに特殊なタグ(バージョン番号)を書けばいいのですが、このバージョン番号はどこに置けばいいのでしょうか?
sessionStorage、またはlocalStorageにレコードを追加すると、タグの目的を達成できます.
ただし、ここでは、より規範的なバージョン番号追加スキームを推奨します.
HTML 5では、metaタグの属性値がタグバージョンの問題をうまく解決する
indexでhtmlでは以下のように定義されています.

リリース後にソースコードを表示すると、対応するリリースのバージョン番号がソースコードに表示されます.つまり、今回のコードのリリースが成功したことを示します.
ここでバージョン番号の問題を解決しました.
 
次に、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: '  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'
  }
}
</code></pre> 
  <p>        ,      521  !</p> 
 </div> 
</div>
                            </div>
                        </div>