记一次 Nuxt 3 在 Windows 下的打包问题
0. 背景
之前用 Nuxt 3 写了公司的官网,包括了样式、字体图标、图片、视频等,其中样式和字体图标放在了 assets/styles
和 assets/fonts
目录下,而图片和视频则放在了 public/images
和 public/videos
目录下。
1. 起因
在不改变任何 nuxt.config.ts
打包配置的情况下,直接执行 npm run build
,会生成一个 .output
目录,结构如下
我们再展开 _nuxt
文件夹,结构如下
这里有个问题就是 .output/public/
下和 .output/public/_nuxt/
下都有 images
和 videos
文件夹,而且里面的内容完全一样,这就造成了发布包体积变大。
2. 经过
然后查阅了官网的配置文档,发现 app.buildAssetsDir
可以改变静态资源的输出路径(默认值也的确是 _nuxt
),于是将其改成 /
后再次打包,然而并没有任何变化 。在仔细看了两遍文档无果后,只能撸起袖子从代码入手,最后在 .output/server/chunks/render.mjs
里发现代码关心的其实是下面的三个配置
因此应该调整的是 assetsPath
,而不是文档上写的 buildAssetsDir
。
改完再次打包,发现已成功将 _nuxt
里的内容移到了外面,见下图
接着 npm start
启动项目,不出所料的出现了问题 ,大大的 404 欢迎我
继续查代码,发现在 .output/server/chunks/static.mjs
里有这么一段代码
if (!asset) {
if (id.startsWith(PUBLIC_PATH) && !id.startsWith(STATIC_ASSETS_BASE)) {
throw createError({
statusMessage: "Cannot find static asset " + id,
statusCode: 404
});
}
return
}
偏偏我们现在的 PUBLIC_PATH
是 /
,这样一来所有不是静态资源且以 /
开头的请求都被拦截到 404 去了 。
手工注释掉这段代码,重启服务,再次刷新页面,ok 了。
原以为到这里就结束了,但又发现所有 .mjs
的请求又都变成了 404
这种批量出问题的,估摸着又是哪里的配置有问题。
再次查看文档,比对代码,发现有个 vite.base
的配置默认是指向 _nuxt
的,赶紧改成 /
。
再次 build,重启服务,刷新页面,成了!
3. 写在最后
这次排查经历告诉我 ... nuxt 3 真的还没有达到生产环境使用的标准,而且我之前有次在 Linux 下 build,出来的结果和 Windows 下还不一样,这个就以后再讨论了。
拜拜,下次见。
记一次 Nuxt 3 在 Windows 下的打包问题的更多相关文章
- Windows下程序打包发布时的小技巧
一.背景 Windows下开发的应用程序在发布时,需要将其依赖的一些动态链接库一起打进安装包里面去.这个时候,快速确定这个程序到底依赖哪些动态链接库变得非常重要.很久以前写过一篇关于Qt程序安装包制作 ...
- Windows下程序打包发布时的小技巧(使用Dependency Walker侦测不理想,改用VS自带的dumpbin则万无一失,还可查看dll导出的函数)
Windows下开发的应用程序在发布时,需要将其依赖的一些动态链接库一起打进安装包里面去.这个时候,快速确定这个程序到底依赖哪些动态链接库变得非常重要.很久以前写过一篇关于Qt程序安装包制作的博客,里 ...
- Windows下编译打包Spice PC客户端
目录 1 环境搭建 2 编译客户端 3 打包客户端 1 环境搭建 1.1 准备工作 安装启动: 安装替换图标工具: Resource Hacker 安装exe制作工具: NSIS(提取码:3dfp ...
- windows下 ionic 打包app --以安卓版本为例
环境安装 1.nodejs 安装版本5.7,尽量不要安装太新的版本,因为可能会出现兼容性问题,一开始本人安装的是6.+的版本,后来出现问题的,马上换回5.7的,问题就不会出现了. 安装教程网上教程很多 ...
- windows下pyinstaller打包踩坑记录
示例: 需要打包的是 ReadConfig.py 文件,同文件夹下调用了Interface.py文件,ui文件夹下调用了 Ui_config.py和Ui_Error.py文件,Interface.py ...
- windows下QT打包
1.找到对应的MinGW命令,打开 2.进入exe目录 3.执行windeployqt XX.exe
- windows 下项目打包、备份、覆盖、md5check
工具从网络自行下载,目前我存储在网盘上,可下载后调用 更新包打包.创建md5,压缩成.zip 现有项目按日期备份 覆盖项目并做md5check @echo off rem ============== ...
- windows下maven打包eclipse工程
打包过程中,可能出现的2个问题: ①.[WARNING] File encoding has not been set, using platform encoding GBK, i.e. build ...
- windows下一个erlang包装镜像启动
于linux环境,erlang经systools:make_script("",[])和systools:make_tar()命令生成图像包,安装镜像包,图片包的安装过程,通过替换 ...
随机推荐
- C# 枚举器(enumerator)
总结: 1.枚举器就像是序列中的"游标"或"书签".可以有多个"书签",移动其中任何一个都可以枚举集合,与其他枚举器互不影响.用来遍历数据结 ...
- 使用ODBC连接MySQL和EXCEL
1.安装ODBC 安装MySQL的时候,可以直接把ODBC一并安装了.如果没有安装的话,则在 https://dev.mysql.com/downloads/connector/odbc/ 下载相应的 ...
- VS 返回值被忽略的解决方法
•问题 用 Visual Studio 编写 C++ 代码的时候,一旦用到 scanf , freopen 等函数的时候,编译器总会不合时宜的给你提示 "返回值被忽略",那么该如何 ...
- P4-可编程语言代码学习
(1).behavioral-model 简称bmv2 P4程序首先经过p4c-bm模块编译成JSON格式的配置文件,然后将配置文件载入到bmv2中,转化成能实现交换机功能的数据结构. behavio ...
- prometheus-数据展示之grafana部署和数据源配置
1.监控pods . prometheus再部署以后,会自带cAdvisor.结果如下: 2.K8S集群状态监控.需要使用kube-state-metrics插件.部署以后 kubernetes. ...
- Linux下安装Apollo (Quick Start)
一.运行时环境 1.CentOS7 2.JDK1.8+ (安装JDK可参考 https://www.cnblogs.com/sportsky/p/15973713.html) 3.MySQL 5.6. ...
- linux基础篇--复习重点成长之路
linux阶段性复习提纲 1.xshell与shell之间的区别 shell shell是一个由C语言编写的程序,它的主要作用就是在用户和操作系统之间搭起一道桥梁(人机操作界面).直接在命令行执行 ...
- 查询 docker 主机的 IP 地址
在 Windows 下查询docker 主机的 IP 地址需要直接去网络中心查找虚拟机的 IP 地址,具体步骤: 进入网络中心 进入适配器更改选项 进入虚拟机 WSL 点击 属性 选中 IPv4 协议 ...
- MATLAB神经网络应用设计【2】
一.深度学习中经常看到epoch. iteration和batchsize,下面按自己的理解说说这三个的区别: (1)batchsize:批大小.在深度学习中,一般采用SGD训练,即每次训练在训练集中 ...
- JDK ThreadLocal解析
Java ThreadLocal解析 ThreadLocal 线程本地变量, 线程私有, 在 Thread 类中用 ThreadLocal.ThreadLocalMap threadLocals 以数 ...