nuxt打包时hash不生效：analyze影响filenames

最新推荐文章于 2024-03-21 09:51:06 发布
最新推荐文章于 2024-03-21 09:51:06 发布
阅读量1.4k 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27513145/article/details/107521197
版权
在Nuxt.js项目中遇到打包后部分chunk文件未附带哈希值的问题，导致缓存问题。通过分析nuxt.config.js中的filenames配置，发现analyze选项可能造成影响。移除该选项后，文件名成功添加了哈希值。为保留分析功能，按照官方文档添加了单独的分析命令。
摘要由CSDN通过智能技术生成

qa反映每次发布后都要重新强制刷新浏览器缓存，非常不友好，去网上查了一下，发现可以在nuxt.config.js中通过设置filenames在打包过程中通过哈希值进行版本控制
API: 构建配置 - NuxtJS - filenames
开始时的配置如下：

//	nuxt.config.js 部分代码
build: {
   
    analyze: true,
    filenames: {
   
		app: ({
    isDev }) => isDev ?<
最低0.47元/天 解锁文章
苍生何辜QAQ
关注
nuxt-viewport::rainbow:为您的Nuxt项目定义自定义视口
05-07
nuxt视口 为您的项目定义自定义视口特征 :high_voltage: 使用快速 :high_voltage: :sunglasses: 自动从Cookie和用户代理检测设备视口 :OK_hand: 零配置启动 :old_man: 支持IE9 +快速设置将nuxt-viewport依赖项添加到...
坑:Nuxt打包Hash没效果的解决方案
糖小七_Zz的博客
12-10 1229
问题 build成hash不起效果 filenames: { app: ({ isDev }) => (isDev ? '[name].js' : Version + '[chunkhash].js'), chunk: ({ isDev }) => (isDev ? '[name].js' : Version + '[chunkhash].js'), css: ({ isDev }) => isDev ? '[name].css' :
ERROR Invalid options in vue.config.js: "filenameHashing" is not allowed
我有一个梦想的专栏
11-15 9401
最近使用vue作为前端开发的框架，前端开发完毕后需要使用vue cli3 编译成静态文件，编译的文件不需要hash,因此加入配置： module.exports = { baseUrl: BASE_URL, outputDir: 'dist', filenameHashing: false, chainWebpack: config =&gt; { config.plu...
nuxt打包后文件过大的优化
浮游的博客
06-20 2256
在使用nuxt.js来做项目的时候，遇到了加载缓慢的问题。解决思路如下1、大文件拆分2、文件压缩。
vue项目打包分包和加hash值
407指导员
07-18 1866
vue项目打包分包和加hash值
Vue+Nuxt项目如何实现首页优化？
伊娃的博客
06-12 6709
首页打开的时候，一共12个请求，4.5M，打开时间大概为7.64s，在打开之前会有很长一段时间的空白，要如何优化首页的加载时间呢？首页打开的情况如图： 一、分析打包情况： Nuxt.js使用webpack-bundle-analyzer来使您可视化包以及如何优化它们。 nuxt.config.js中analyze的配置如下： build: { /* ** You ca...
serverless-nuxt:AWS Lambda +无服务器Nuxt =无服务器Nuxt:rocket::rocket:
05-13
无服务器Nuxt插件 带有无服务器框架的AWS（Lambda + S3）上的Nuxt。演示版安装使用npm install命令完成npm install ：npm i serverless-nuxtnpm i serverless serverless-nuxt-plugin -D 查看以设置您的项目。文件...
nuxtjs-yandex-metrika:NuxtJS模块插件，用于连接Yandex.Metrica
05-08
NuxtJS模块/用于连接Yandex.Metrika（Yandex.Metrika）的插件 安装和配置模块/插件 npm i @rkaliev/nuxtjs-yandex-metrika 必须在模块部分中添加nuxt.config.js： modules: [ [ '@rkaliev/nuxtjs-yandex-metrika'...
nuxt-offline-alert：:electric_plug:使用nuxt帮助程序丢失连接的简单vue组件
02-17
nuxt-offline-alert 预览 安装 npm install nuxt-offline-alert 用法 最常见的用例是在nuxt中为其全局创建组件，以为其创建插件。 // in your nuxt-offline-alert.js or similar file import OfflineAlert from ...
nuxt-template:具有最佳实践文件夹结构、windi.css 配置的企业 Nuxt 2 样板 :sparkles::sparkles::sparkles:
08-04
nuxt-模板 构建设置 # install dependencies $ yarn install # serve with hot reload at localhost:3000 $ yarn dev # build for production and launch server $ yarn build $ yarn start # generate static ...
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
12-02
执行 npm run build 之后的 dist 目录的静态资源的文件名多会追加上 hash 值，比如: page1.f151b4d3.js 那如果不要 hash 呢，你只需要配置 vue.config.js 文件中的 filenameHashing 官方文档也提到了因为 html 也是我们通过插件生成的，静态资源直接就 inject 进去的，所以，当 html 不是自动生成或者其他情况时候，就不能加 hash 了，可以配置 false。 filenameHashing: false 我们看看源码实现： 首先它是 vue.config.js 的一个配置，在文件 cli-service/li
Nuxt去除data-n-head等默认属性
三三
11-03 5664
去掉例如以下属性： 至于为什么要去掉呢，你永远不知道你的甲方有多**，举个栗子： 一把辛酸泪 ~ 以下是解决办法： （1）安装 npm install cheerio （2）引入 nuxt.config.js import cheerio from 'cheerio' export default { hooks: { 'render:route': (url, result) => { this.$ = cheerio.load(result.html,{decodeEn
vue nuxt.js设置页面head()信息不生效问题
qq_42333645的博客
09-08 1719
原： <script> export default { head() { return { title: '标题' } } } </script> 改为： <script> export default { mounted() { if (process.client) { document.title = '标题' } } } &.
vue nuxt.js head()设置SEO页面三要素无效的解决办法
qq_40225369的博客
07-14 1912
本来nuxt自带了head() 方法，可以设置路由页面的title, content, keywords, 但是我们项目不知道为什么，有些页面源代码就生成了meta标签，而有些页面就没有，而且发现生成了的页面meta标签在加载css文件之前，没有生成的在加载css文件之后 这个是生成了的 这个是没生成的 虽然找到了一点不同，但是还是没找到原因，如果有知道原因的兄弟可以告诉我一声， 虽然我不知道原因，但是我找到了解决办法 解决办法： nuxt中有一个asyncData方法，可以在里面设置本页面的title，c
js放到head中失效的原因与解决方法
小森努力努力再努力i
06-29 957
写好的js放到body里面可以执行，但是放到head中没有任何效果，为什么导致这种原因呢？ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/css.css" /> <script src="js/jquery.
Nuxt3遇见的坑（四）：图片动态渲染之后打包路径问题以及打包css样式问题
weixin_43160498的博客
12-26 4559
nuxt3 动态渲染图片打包路径问题以及打包css路径
Nuxt.js(二)
qq_45769990的博客
12-14 793
路由对比 标签名 描述 <nuxt-link> nuxt.js中切换路由 <Nuxt /> nuxt.js的路由视图 <router-link> vue默认切换路由 <router-view/> vue默认路由视图 基础路由 路径 组件位置及其名称 规则 / pages/index.vue 默认文件 index.vue /user pages/user/index.vue 默认文件 index.vue /
Nuxt 速度优化实战
小小小的骆驼的前端技术博客
05-18 4922
Nuxt 速度优化实战 背景是谷歌统计移动端网页加载速度在 10s 左右，所以优化一波，整体优化下来能优化到 7s 左右。主要有以下思路： 减少请求数和请求大小 资源延迟加载或者懒加载相关资源 验证 cdn 是否命中缓存 优化 dns 查询 优化缓存的设置 利用服务端渲染特性，提前请求数据 设置资源域名和主站域名不同以减少资源请求 cookie 加速请求 prefetch, preload, preconnect 下面将详细介绍具体的分析过程 1. 减少请求数和请求大小 引用官方文档 Nuxt.js
Nuxt v3 最后一个版本已发布，Nuxt v4 即将到来！
最新发布
ikxin的博客
03-21 737
3 月 18 日，Nuxt 团队成员 daniel roe 声称 Nuxt v3.11 已发布，这可能是 Nuxt v4 到来之前的最后一个小版本，因此在改版中加入了大量功能和改进。
Nuxt.js框架学习笔记：构建个人站点与核心概念解析
- `components`：存储自定义Vue.js组件，这些组件不具备Nuxt.js的特有功能，如`asyncData`方法。 - `layouts`：用于定义应用的布局组件，全局适用。 - `middleware`：存放自定义的中间件。 - `pages`：关键目录...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值