Vue CLI 4.0でCache Bustingにクエリストリングを用いる
4221 ワード
vue.config.jsを特に編集していなければbuild時にハッシュ付きのファイルが生成されると思いますが、様々な理由によりハッシュ付きのファイルが生成されるのは不味い時、人はクエリストリングでキャッシュバスティングを行いたくなるものでしょう。
vue.config.js
module.exports = {
filenameHashing: false,
chainWebpack: config => {
config.output.filename('js/[name].js?[contenthash:8]');
config.output.chunkFilename('js/[name].js?[contenthash:8]');
config.plugin('extract-css').tap(args => {
(args[0].filename = 'css/[name].css?[contenthash:8]'),
(args[0].chunkFilename = 'css/[name].css?[contenthash:8]');
args[0].allChunks = true;
return args;
});
}
};
filenameHashing: false でハッシュ付きファイルの生成を無効にします。
chainWebpackでwebpackの設定を上書きします。
この設定でいざbuildすると、Vue CLIの場合head内にpreloadが追加されますが
同時に .map ファイルもpreloadに追加されてしまいます。
vue.config.js
config.plugin('preload').tap(args => {
args[0].fileBlacklist = [/\.map\?(.+?)$/, /hot-update\.js$/]
return args
});
同様に上記の設定を追加すれば良いと思っていたのですがエラーで解決出来なかったため productionSourceMap: false を追加しました。
build時にsourcemapファイルは特に必要ないしpreloadから.mapの文字列は消え去ったのでこれで良しとします。
Author And Source
この問題について(Vue CLI 4.0でCache Bustingにクエリストリングを用いる), 我々は、より多くの情報をここで見つけました https://qiita.com/ongaq/items/fdab1a770aef0fe56843著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .