如何使用vue.js和webpack检索代码拆分.js文件的未缓存版本？

因此，我的应用程序中安装了Vue.js（使用Vue cli和webpack）。一切都很好。此外，我还实现了代码拆分，这样我就不必加载在需要时才使用的组件。这一切都很好，以及。但是，如果我要发布我的应用程序的新版本，生成的代码拆分.js文件将缓存在客户端浏览器中，在清除浏览器中的缓存之前，它们不会得到更新

为了防止在使用main.js之前发生这种情况，我在webpack构建的main.js文件上的querystring值中附加了版本号，实现了代码拆分，如下所示：

<script src="~/scripts/build/main.js?v=@ViewBag.VersionNumber" asp-append-version="true"></script>

const page0 = ()=> import(/* webpackChunkName: "my-page-0" */ './components/MyPage0.vue');
const page1 = ()=> import(/* webpackChunkName: "my-page-1" */ './components/MyPage1.vue');
const page2 = ()=> import(/* webpackChunkName: "my-page-2" */ './components/MyPage2.vue');
const page3 = ()=> import(/* webpackChunkName: "my-page-3" */ './components/MyPage3.vue');

但我不知道如何使名称动态化，以便我可以附加一个版本或散列，或者在软件更新后强制浏览器检索未缓存的版本。

您必须使用Webpack

输出

配置。基本思想是在您的Webpack配置中读取

package.json

文件，并使用version字段并将其附加到块名称中

const path=require（'path'）；
//假设您有package.json。读取版本字段。
const packageVersion=require（'./package.json'）.version；
const SITE_DIST=path.join（u dirname，'./DIST'）；
module.exports={
输出：{
路径：现场区，
文件名：'[name].[fullhash].bundle.js'，
//chunkFilename可用于附加包版本
chunkFilename:`[name]-${packageVersion}.js`
},
//其他配置。。。。
}

另一方面，我不鼓励使用

asp-append-version

；尝试使用构建初始HTML/ASP.NET页面。Webpack提供了更好的缓存破坏功能。您甚至可以生成ASP页面，同时确保正确地将缓存中断的模块脚本/css引用注入其中。比如说,

新的HtmlWebpackPlugin({
模板：'./site/index.html'，
文件名：“index.asp”
})

为了生成唯一的文件名以避免缓存问题，您可以使用Webpack的内置输出生成

此外，使用这个，您甚至不需要使用您的项目版本。每次更改代码时，Webpack都会使用

filename

和

chunkFilename

为包生成唯一的名称；例如：

main.f62606ed4879fe34afca.bundle.js

。并且，这个名称将自动注入插件生成的HTML/ASP文件中

---

看来你重新发明了方向盘。Vue CLI已使用HashedModuleIdsPlugin创建哈希块。

filename: '[name].bundle.js',
filename: '[id].bundle.js',
filename: '[contenthash].bundle.js'
// Or any combination of above