nuxt发布部署

那谁家的菇凉

已于 2024-04-10 09:26:47 修改

阅读量3.2k

点赞数

分类专栏：前端文章标签： nuxt nuxt发布部署 nuxt打包

于 2019-12-19 11:42:09 首次发布

本文链接：https://blog.csdn.net/illa123/article/details/103611520

版权

前端专栏收录该内容

9 篇文章

订阅专栏

第一次用nuxt做了一个项目，记录下我项目做完了怎么打包、发布部署的

一、nuxt打包

执行命令：

nuxt build 或 npm run build（这个需要在pakage.json文件做配置）

执行完之后会生成一个.nuxt，包就打好啦~~~~~~~~

2、发布部署

执行命令：

nuxt start 或 npm run start (同理要在pakage.json配置)

注意正确配置生产环境的数据库账户和密码，否则会提示 Unhandled rejection SequelizeAccessDeniedError: Access denied for user 'root'@'localhost' (using password: YES)，访问数据库被拒绝的情况

执行完命令就可以在浏览器打开了

PS：官网推荐的 package.json 配置如下：

{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

那谁家的菇凉

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

nuxt部署

chris

12-23

703

部署第一步：首先把项目里的运行npm run build，打包出.Nuxt文件夹，然后把.Nuxt、package.json、nuxt.config.js、static这些文件上传到服务器。第二步：在服务端刚刚上传的路径下，运行npm install或者cnpm install 等待结束之后会出现node-modules文件，也就是项目所需要的依赖。第三步：通过pm2启动项目，pm2 start npm --name “xxx” – run start 其它方式： ## (项目目录的node_mo

nuxt项目部署教程

weixin_40216358的博客

11-02

4530

nuxt打包项目有两种方式：一个是npm run generate, 另一个是npm run build。两种的区别是generate是生成一系列的静态页面，该页面的内容在打包的时候就已经注定了，即使某些有请求接口的数据变了，页面也不会变，所以该种方式适合一些内容不怎么改变的页面。而目前我现在做的项目有一些资讯模块，需要随时更新，所以使用build方式进行打包部署 build：(pm2+nginx的方式) 在工作根目录执行npm run build 把.nuxt、static、nuxt.config

参与评论您还未登录，请先登录后发表或查看评论

Nuxt项目的部署

weixin_34179968的博客

08-29

4181

项目介绍项目中整合 vue + nuxt + axios + vuex + vue-router (nuxt 自带 vuex 和 vue-router)，一个基于 Nuxt 的服务器端渲染 Demo PC端GitHub地址移动端GitHub地址一、PC端项目部署关于项目部署折腾了我好多时间，网上许多百度来的文档不适合我的项目，所以自己摸索着终于部署起来了，开心O(∩_∩)O~~ 1...

【前端】Nuxt打包部署的几种方式

最新发布

qq_59344127的博客

04-15

1121

一、总结知识点Nuxt 是基于 Vue 的服务端渲染框架，部署方式主要取决于你使用的 Nuxt 模式：、或。不同模式下的打包部署流程略有不同。以下将分别介绍 Nuxt 应用的打包和部署方式。二、详细说明适合：SEO 要求较高、动态内容较多的项目。打包命令：启动命令：部署要求：需要支持 Node.js 的服务器（如 pm2、Docker、VPS）。部署流程：（2）SPA（单页应用）适合：不需要 SSR，只需客户端渲染的项目。配置修改：打包命令：输出目录：（Nuxt 3）或

Nuxt：Nuxt3项目部署【详细教程-亲测有效~！】

qq_44776454的博客

02-10

2802

Nuxt：Nuxt3项目部署【详细教程-亲测有效~！】

nuxt 部署

weixin_38999683的博客

08-25

2016

node -v 安装 nginx -v 安装第一步、在本地npm run build,会在.nuxt文件夹下生成dist文件; 第二步、把本地文件的.nuxt,static,package.json,nuxt.config.js,这四个文件夹放到服务器目录文件下，我在服务器上创建了run/www/visneyNuxt路径，四个文件放到里面; 第三步、用cmd进入目录文件夹，安装依赖，npm install --production; 第四步、npm start此时运行的是ht...

大前端【Nuxt 发布部署-打包】

weixin_37883657的博客

01-20

593

打包 Nuxt.js 应用最简单的部署方式配置 Host + Port 压缩发布包把发布包传到服务器解压安装依赖启动服务使用PM2启动Node服务自动化部署介绍自动化提交部署代码修改后 ...

前端nuxt项目部署

thulium_kyg的博客

11-01

602

前端NUXT发布

前端门户nuxt部署文件和nginx代理配置.zip.zip

11-23

前端门户nuxt部署文件和nginx代理配置，仅供学习所用，不可以他用，谢谢

nuxt项目发布-部署

qt的博客

01-15

1418

如何将nuxt项目进行发布部署打包 Nuxt.js 应用命令描述 nuxt 启动一个热加载的web服务器(开发模式) localhost://3000 nuxt build 利用webpack编译应用，压缩js和css(发布用) nuxt start 以生产模式启动一个web服务器（需要先执行nuxt build） nuxt generate 编译应用，并依据路由配置生成对应的html文件(用于静态文档部署) 可以将命令加入到package.json中执行np

nuxt项目部署

前端劝退工程师

09-27

1万+

搭建搭建其实没什么好说的，跟着文档走然后在page下多建一个页面部署接下来去服务器推荐一个很好用的vscode插件【remote ssh】，可以在本地进行云开发服务器环境 node，yarn(个人喜好)，nginx //centos 安装yarn curl -sL https://dl.yarnpkg.com/rpm/yarn.repo -o /etc/yum.repos.d/yarn.repo ...

搭建和部署nuxt项目

dan_seek的博客

11-02

6209

说在前面的话 vue.js开发的SPA是不利于seo的，搜索引擎对它支持的并不是太好，百度根本就不可以在SPA应用的页面抓取数据，这对很看重seo优化的网站来说肯定是不能容忍的。而使用nuxt开发的网站就可以让爬虫爬取，而且它是基于vue.js开发的服务端渲染应用框架，上手极快，大大的简化了SSR的开发难度。本机环境操作系统：centos7、Windows10 nodejs：v13.0.1 n...

Nuxt项目的部署教程

热门推荐

qq_40060547的博客

05-08

1万+

前言由于vue通过js动态控制路由去生成内容，导致搜索引擎无法收录，天生不适合SEO。而Nuxt是一款基于vue的框架，内置了服务器端渲染。 Node.js 服务器将基于 Vue 的组件渲染成 HTML 并传输到客户端，而不是纯 javascript。与传统的 Vue SPA 相比，使用 SSR 将带来巨大的 SEO 提升、更好的用户体验和更多的机会。 Nuxt的部署与vue有出入，主要有两种模式，npm run generate和npm run build 方式一、generate模式这种模式打

一文搞定nuxt.js搭建到部署（ssr和静态部署）

weixin_45636198的博客

03-04

1万+

uxt 是一个更高级别的 Node.js web 开发框架，用于创建 Vue 应用，可在两种不同模式下开发和部署：通用（SSR）或单页应用（SPA）。此外，您可以在 Nuxt 中将 SSR 和 SPA 部署为静态生成的应用。即使您可以选择 SPA 模式，Nuxt 的全部功能仍在于其通用模式或用于构建通用应用的服务器端渲染（SSR）。通用应用用于描述可以在客户端和服务器端执行的 JavaScript 代码。SSR是服务端渲染：在后台将vue实例渲染为HTML字符串直接返回，在前端激活为交互程序。

部署Nuxt3项目（含PM2、Docker部署，及配合jenkins实现自动化部署）

weixin_44531811的博客

01-23

6417

笔者这里的环境是两台服务器，一个是jenkins服务器，一个是测试服务器；jenkins服务器中的jenkins是通过部署的, 如果需要配置可以留言或私信作者；测试服务器中的nginx是单独安装的，然后测试服务器中还安装了docker；不管是pm2部署还是docker部署，最终都是用nginx将服务代理出去，nginx服务代理配置会在下面，具体体现；

nuxt3 部署

03-08

### Nuxt 3 部署指南与最佳实践 #### 准备工作为了成功部署 Nuxt 3 应用程序，确保项目已经按照官方文档完成开发环境配置并测试无误。Nuxt 3 支持多种托管平台和服务提供商，选择合适的主机对于优化性能至关重要[^1]。 #### 构建生产版本构建命令会创建一个高效的生产就绪应用程序，在 `package.json` 中通常定义如下脚本： ```json { "scripts": { "build": "nuxi build", "generate": "nuxi generate" } } ``` 执行 `npm run build` 或者针对静态站点生成使用 `npm run generate` 来准备用于发布的文件结构。 #### 使用 Node.js 运行时服务端渲染 (SSR) 如果选择了 SSR 方式，则需设置服务器来处理请求并通过 Node.js 执行应用逻辑。可以利用 PM2 等进程管理工具保持长期运行稳定性和自动重启功能。 #### 静态网站生成 (Static Site Generation, SSG) 当采用 SSG 方法时，只需上传由 `npm run generate` 命令产生的 `.output/public/` 文件夹下的资源到任何支持 HTML/CSS/JS 的 Web 主机即可。 #### 容器化解决方案 Docker 是一种流行的容器技术，能够简化跨不同操作系统间的部署流程。编写 Dockerfile 并通过 CI/CD 流水线自动化整个过程有助于提高效率和一致性。 #### 性能调优建议 - 启用 HTTP 缓存控制头以减少重复加载时间； - 实施代码分割策略降低初始页面体积； - 利用 CDN 加速全球访问速度； - 对图片和其他媒体资产实施懒加载机制； #### 日志记录与监控集成日志聚合系统如 ELK Stack 及实时监测仪表板可以帮助及时发现潜在问题并快速响应异常情况。