Nuxt执行npm run build无dist文件夹，上传Bluehost仅显示目录列表如何解决？

npm run build不生成dist、npm run start可正常运行的原理 #

Nuxt默认支持多种渲染模式，你当前使用的是服务端渲染（SSR）模式，和纯客户端渲染的Vue项目有本质区别：

• 纯Vue项目的npm run build会生成纯静态的dist文件夹，包含所有HTML/JS/CSS资源，直接托管即可访问
• Nuxt SSR模式下执行npm run build，生成的是服务端运行需要的产物，Nuxt2对应.nuxt文件夹，Nuxt3对应.output文件夹，没有独立的index.html入口，因为页面是服务端动态渲染生成的。
• npm run start的本质是启动一个Node.js服务，加载构建好的服务端产物，接收浏览器请求后动态拼接生成页面内容返回，因此不需要静态index.html也能正常访问站点。

上传到Bluehost后仅显示文件夹列表的原因 #

普通的Bluehost虚拟主机默认仅支持静态文件托管或PHP运行环境，不支持自动启动常驻Node.js进程，也不会主动执行npm run start命令。你上传的只是构建后的产物文件，Web服务器找不到默认的静态入口文件，就会直接返回文件夹列表。

Nuxt部署到主机的常规方式 #

并不只有npm run generate一种方式，可选方案如下：

• 静态站点部署（最适配普通虚拟主机的方案）：执行npm run generate命令，Nuxt会预渲染所有页面，生成纯静态的dist文件夹，包含所有可直接托管的HTML/JS/CSS资源。你只需要把dist文件夹内的所有文件上传到Bluehost的站点根目录（通常是public_html文件夹）即可正常访问，适合内容偏静态的个人站点使用。
• SSR模式部署：需要你的Bluehost套餐支持Node.js环境、允许常驻Node进程、可配置反向代理。操作流程为：上传完整项目或构建后的产物到服务器，在服务端安装依赖后执行npm run start启动Nuxt服务，再配置Web服务器将域名请求转发到Nuxt默认监听的3000端口即可。注意普通虚拟主机套餐大多不支持该部署方式。

内容的提问来源于stack exchange，提问作者Branko Anokic