NuxtJS项目——命令和部署
一、命令
(1)常用命令
命令 | 描述 |
nuxt | 启动一个热加载的Web服务器(开发模式) localhost:3000。 |
nuxt build | 利用webpack编译应用,压缩JS和CSS资源(发布用)。 |
nuxt start | 以生产模式启动一个Web服务器 (需要先执行nuxt build )。 |
nuxt generate | 编译应用,并依据路由配置生成对应的HTML文件 (用于静态站点的部署)。 |
如果使用了 Koa/Express 等 Node.js Web 开发框架,并使用了 Nuxt 作为中间件,可以自定义 Web 服务器的启动入口:
命令 | 描述 |
NODE_ENV=development nodemon server/index.js | 启动一个热加载的自定义 Web 服务器(开发模式)。 |
NODE_ENV=production node server/index.js | 以生产模式启动一个自定义 Web 服务器 (需要先执行 nuxt build )。 |
(2)常见参数
--config-file
或-c
: 指定nuxt.config.js
的文件路径。--spa
或-s
: 禁用服务器端渲染,使用SPA模式--unix-socket
或-n
: 指定UNIX Socket的路径。
(3)配置命令
将命令添加至 package.json文件:
"scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate" }
(4)运行命令
通过 npm run <command>
来执行相应的命令。如: npm run dev
。
二、部署
Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署和静态应用部署。
(1)服务端渲染应用部署
部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt
命令,而应该先进行编译构建,然后再启动 Nuxt 服务。
建议将 .nuxt
加入 .npmignore
和 .gitignore
文件中。
(2)静态应用部署
Nuxt.js 可依据路由配置将应用静态化,使得我们可以将应用部署至任何一个静态站点主机服务商。npm run generate命令生成应用的静态目录和文件,这个命令会创建一个 dist
文件夹,所有静态化后的资源文件均在其中。此外,generate也支持动态路由。
使用 nuxt generate
静态化应用的时候, 传给 asyncData() 和 fetch() 方法的上下文对象 不会包含 req
和 res
两个属性。
(3)单页面应用程序部署 (SPA)
nuxt generate
在 build/generate 时间内仍然需要SSR引擎,同时具有预渲染所有页面的优势,并具有较高的SEO优化和页面加载能力。内容在构建时生成。使用时启用SPA模式 mode: 'spa'
或 --spa
,并且我们运行打包,生成在导报后自动启动,生成包含常见的meta和资源链接,但不包含页面内容。
对于SPA部署,必须执行以下操作:
- 将
nuxt.config.js
中的mode
更改为spa
。 - 运行
npm run build
. - 自动生成
dist/
文件夹,部署到您的服务器,如Surge,GitHub Pages或nginx。
另一种可能的部署方法是在spa
模式下将Nuxt用作框架中的中间件。这有助于减少服务器负载,并在无法进行SSR的项目中使用Nuxt。
相关文章
- 如何创建六西格玛项目章程?
- 使用repo+gerrit,基于IMX6ULL开发自己的项目
- 【实用的开源项目】使用云服务器部署Chemex,让软硬件资产的管理更加智能、高效!
- from django.db import models_django项目部署
- 支付宝接入(8)-1024电商平台项目技术选择和创 建聚合工程项目【工业级PaaS云平台+SpringCloudAlibaba+JDK11综合项目实战】
- Vue开发实战01-创建基础项目,包管理使用yarn
- ToB月报|7月融资金额超37亿;早期项目(A轮前)占比超六成
- 一图了解nginx在项目中的使用
- BMP项目部署参考文档
- 我把Github上最牛b的Java教程和实战项目整合成了一个PDF文档
- Docker:第六章:Docker部署项目
- 2022 GitHub 优质ERP 开源项目推荐
- Nginx部署Vue项目
- 如何优雅的通过Shell脚本一键部署GO项目到服务器 |Go主题月
- 如何优雅的把Go项目部署到Linux服务器?
- 湖仓一体电商项目(二十四):合并Iceberg小文件
- eclipsesvn使用教程_eclipse导入svn项目
- 【愚公系列】2022年11月 微信小程序-优购电商项目-商品支付页面
- 在 Windows 上搭建配置 Jenkins 然后编译打包 VS 项目
- 【实用的开源项目】使用服务器部署Sharry:真的很好用的文件分享程序!
- 【实用的开源项目】使用服务器部署memos,一款拥有社交功能的、好看的自托管备忘录
- 10分钟在 Rainbond 上部署 mall 电商项目
- Python项目requirements.txt依赖包如何生成?
- 浅谈redis缓存在项目中的使用
- scrapy 部署的项目带有验证,怎样启动项目详解程序员
- Linux利用Shell脚本部署jar包项目的完整步骤
- Tomcat 部署项目的三种方法详解程序员
- Spark项目之电商用户行为分析大数据平台之(八)需求分析详解大数据
- Linux下部署项目:实现简单、快速、高效(在linux下部署项目)
- 5 个可在家中使用的树莓派项目
- Mozilla 向四个开源项目捐赠 30 万美元
- 研究发现从 Stack Overflow 复制代码的习惯导致 GitHub 项目安全性下降
- 英特尔退出当初与Rackspace一起搞的OpenStack项目!
- 当投资人相中一个区块链基础设施项目时,他们在想什么?
- 在 IDEA 中创建 Java Web 项目的方式(详细步骤教程)