nuxt build后static文件夹丢失

最新推荐文章于 2025-09-15 14:36:50 发布
原创 最新推荐文章于 2025-09-15 14:36:50 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文介绍了一种在Nuxt项目中正确部署静态文件的方法。通过将static文件夹复制到与.nuxt同级目录，可以解决部署后静态资源无法正常加载的问题。

场景

根据nuxt的官方文档，运行起来的时候会把static映射到 / 路劲下。我是用的是 npm run start方式部署的王章。即本地运行npm run build。之后得到.nuxt的文件夹。直接上传到服务器后使用

pm2 start npm --run start

解决方案

直接把static 文件拷贝到与.nuxt的同级目录即可

参考文档

在这里插入图片描述
nuxt文档地址

【Nuxt】05 Nuxt2项目打包优化
ColdCoder的博客
09-27 2604
在nuxt.config.js配置。
NUXT3 项目部署宝塔
FitnessSnail的博客
03-14 2270
【代码】NUXT3 项目部署宝塔。
nuxt部署的路径问题
关中刀客在青岛
10-24 5135
这里是一个通过 npx create-nuxt-app生成的SPA单页面应用，要部署成一个静态项目，先用命令打包 nuxt generate 但dist目录下直接生成的项目跑不起来，js等资源用了绝对路径而找不到，原因是路由输出默认的绝对路径。 要在nuxt.config.js里添加router的base为“./”； 如果这时打包发现引用的js找到了，但首页却找不到了，经多次尝试，把ro...
nuxt开发的项目中打包时generate和build的区别
最新发布
weixin_55800388的博客
09-15 254
Nuxt项目中generate和build的主要区别：generate用于构建服务端渲染(SSR)应用，生成.output目录，需启动node服务；build则用于静态网站生成(SSG)，输出dist目录，无需node服务。generate适合交互频繁的项目，build适用于更新少的页面。需注意generate打包时首屏数据会被固化，数据变更需重新generate部署。
nuxt无法找到static里面的静态资源原因
weixin_40765395的博客
11-03 2651
nuxt无法找到static里面的静态资源原因 因为项目需要，把旧vue项目移植过来。然后按照教程在nuxt创建了src文件夹，原因就在这里。因为设置了srcDir的初始目录。所以找不到src外面的文件夹。 解决：不要把旧项目文件夹都放到src里面。按照创建项目时候的文件夹位置来 ...
nuxt中nuxt.config.js引入js找不到，亲测有效
weixin_46051988的博客
10-06 1587
head: { title: 'nanjustar', htmlAttrs: { lang: 'en' }, meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: '' }, ..
解决vue项目 build之后资源文件找不到的问题
01-19
解决静态资源失效的问题 这就需要修改我们的 config 中的 index.js了，默认的build 中的部分是这样的： ... assetsSubDirectory: 'static', assetsPublicPath: '/', 修改之后的应为这样的: build: {
3-3-nuxt.js实现 realworld-nuxtjs项目，同时学习部署在自己服务器上
cloveryuan的博客
09-21 1937
=》测试 -bui9bi NuxtJS 代码仓库地址：https://gitee.com/cloveryuan/realworld-nuxtjs 一、Nuxt.js是什么 一个基于Vue.js生态的第三方开源服务端渲染应用框架 它可以帮我们轻松的使用Vue.js技术栈构建同构应用 官网：https://zh.nuxtjs.org/ Github仓库：https://github.com/nuxt/nuxt.js 二、Nuxt.js的使用方式 初始化项目 已有的Node.js服务端项目 直接把N
大前端学习笔记 -- NuxtJS项目案例--RealWorld（Nuxt脚手架创建项目、Git Actions自动发布和PM2部署）
爱玲姐姐的博客
09-29 3075
NuxtJS项目案例–RealWorld（创建Nuxt项目、Git Actions自动发布和部署） 一、案例项目realworld介绍 1. 案例项目介绍 案例名称：RealWorld 这是一个开源的学习项目，目的就是帮助开发者快速学习新技能。 GitHub仓库：https://github.com/gothinkster/realworld 在线实例：https://demo.realworld.io/ 2. 案例相关资源 页面模板：https://github.com/gothinkster/real
Nuxt框架
06-12
### Nuxt.js 框架使用指南和特性 Nuxt.js 是一个基于 Vue.js 的通用应用框架，旨在简化开发过程并提供最佳实践。以下是关于 Nuxt.js 的特性和使用指南的详细信息。 #### 1. Nuxt.js 的核心特性 - **自动化配置**：...
vue cli3.0打包上线静态资源找不到路径的解决操作
10-15
当运行 `npm run build` 命令打包项目时，Vue CLI 会根据 `vue.config.js` 中的配置来处理资源路径。`outputDir` 是打包后的输出目录，默认为 `'dist'`。`assetsDir` 指定静态资源（如图片、字体等）存放的目录，...
nuxt静态部署打包相对路径操作
01-22
以往在nuxt项目中，打包静态化部署的的文件如下： 路径为绝对路径，当项目的域名为二级域名的时候，就不能打包为这绝对路径了。 nuxt不同于vue项目，思索了许久，终于找到了配置的地方： nuxt项目中 nuxt.config.js ： module.exports = { router: { base: './' } } 打包后的文件： 补充知识：nginx部署，nuxt静态部署，路由跳转失效的问题 nuxt静态部署问题 静态部署：路由模式跳转失效的问题；不能使用历史模式，需要使用 ‘hash’ 模式，再进行打包 ‘npm run generate’ 文件:nuxt.conf
nuxt案例全局CSS丢失的那部分样式hover.css
10-29
最近在学nuxt 然后边看案例边敲代码,结果发现nuxt官方案例有个Bug 在 CSS全局案例那里，少给了一个样式 hover.css,来吧，我做个雷锋，拿去吧
nuxt打包后文件过大的优化
浮游的博客
06-20 3164
在使用nuxt.js来做项目的时候，遇到了加载缓慢的问题。解决思路如下1、大文件拆分2、文件压缩。
分享：nuxt静态文件
awseda的博客
06-14 1659
静态文件 如果你的静态资源文件需要 Webpack 做构建编译处理，可以放到 assets 目录，否则可以放到 static 目录中去。 Nuxt 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下，像 robots.txt 或 sitemap.xml 这种类型的文件就很适合放到 static 目录中。 你可以在代码中使用根路径 / 结合资源相对路径来引用静态资源： <!-- 引用 static 目录下的图片 --> <img src="/my-image.png"/>
Nuxt 框架静态站点生成（SSG)（六）
qq_35876316的博客
06-27 1673
当你运行 nuxt generate 命令时，Nuxt 会调用 asyncData 方法来获取数据，并为每篇文章生成一个静态 HTML 文件。生成的静态文件会放在 dist/ 目录下。首先，你需要在项目的 nuxt.config.js 文件中设置 target 为 ‘static’，这告诉 Nuxt 你打算生成一个静态网站。你可以创建一个动态路由来捕获这个 ID，并为每篇文章生成一个静态页面。这个命令会触发静态站点的生成过程，Nuxt 会读取你的动态路由，并为每个可能的路由生成一个静态 HTML 文件。
nuxt打包
weixin_44815800的博客
05-10 2372
nuxt3打包
Nuxtjs实现服务端渲染和静态化站点
jimojianghu的专栏
11-09 2483
Nuxt.js是一个基于Vue的增加了node服务的通用框架，本文就是介绍使用它如何实现可以解决Vue项目的服务端渲染，以及生成纯静态化的站点。
nuxt项目打包部署
热门推荐
cpa0701的博客
04-29 1万+
nuxt run build 上传文件 将打包后的下图中对应的几个文件上传到服务器 修改package.json 注意在cmd命令行中直接使用nuxt会报错找不到nuxt命令，这里直接写到，配置文件里面就行了。我这里是加了一条"server":“nuxt start” 修改你的ip和端口号 npm run server 运行后通过ip加端口就能正常访问 通过pm2监控多项目 npm ins...
npm nuxt build打包后的静态文件在哪里
03-15
根据问题描述，用户询问的是`npm build`后的静态文件位置，即运行`npm run build`，对应的Nuxt命令是`nuxt build`，这时候生成的文件位于`.nuxt/dist`目录，但该目录可能包含客户端和服务端的代码，而不是可直接部署...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值