开场白
开始使用
API
- API: The <client-only> Component
- API: <nuxt-child> 组件
- API: <nuxt-link> 组件
- API: <nuxt> 组件
- API: 构建配置
- API: buildDir 属性
- API: 缓存配置
- API: CSS 配置
- API: dev 属性配置
- API: dir 属性
- API: 环境变量配置
- API: generate 属性配置
- API: globalName 属性
- API: head 属性配置
- API: The hooks Property
- API: ignore 属性
- API: The loading indicator Property
- API: loading 属性配置
- API: The mode Property
- API: modern 属性
- API: modules 属性
- API: modulesDir 属性
- API: performance 属性
- API: plugins 属性配置
- API: The render Property
- API: rootDir 属性配置
- API: router 属性配置
- API: server 属性
- API: serverMiddleware 属性
- API: srcDir 属性配置
- API: transition 属性配置
- API: vue.config 属性
- API: watch 属性
- API: watchers 属性
- API: 上下文对象
- API: asyncData 方法
- API: The Builder Class
- API: The Generator Class
- API: The ModuleContainer Class
- API: The Nuxt Class
- API: The Renderer Class
- API: Nuxt Modules Intro
- API: nuxt.renderAndGetWindow(url, options)
- API: nuxt.renderRoute(route, context)
- API: nuxt.render(req, res)
- API: Nuxt(options)
- API: fetch 方法
- API: head 方法
- API: key 属性
- API: layout 属性
- API: loading 属性
- API: middleware 属性
- API: scrollToTop 属性
- API: transition 属性
- API: validate 方法
- API: The watchQuery Property
配置
- 外部资源
- 预处理器
- JSX
- Postcss 插件
- 如何扩展 Webpack 的配置
- Webpack 插件
- Caching Components
- 如何更改应用的主机和端口配置?
- 如何集成 Google 统计分析服务?
- 如何发起跨域资源请求?
- How to extend Webpack to load audio files?
部署
- 如何使用 Now.sh 进行部署?
- 使用 Surge.sh 部署
- 在 Google App Engine 上部署
- Netlify 部署
- AWS: S3+Cloudfront 部署
- Dokku 部署
- nginx 代理
- 如何部署至 GitHub Pages?
- 部署至 Heroku
其他
命令
Nuxt.js 提供了一系列常用的命令, 用于开发或发布部署。
命令列表
命令 | 描述 |
---|---|
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 )。 |
参数
您可以使用 --help
命令来获取详细用法。常见的命令有:
--config-file
或-c
: 指定nuxt.config.js
的文件路径。--spa
或-s
: 禁用服务器端渲染,使用SPA模式--unix-socket
或-n
: 指定UNIX Socket的路径。
你可以将这些命令添加至 package.json
:
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
}
这样你可以通过 npm run <command>
来执行相应的命令。如: npm run dev
。
提示: 要将参数传递给npm命令,您需要一个额外的--
脚本名称(例如:npm run dev --参数 --spa
)
开发模式
可通过以下命令以开发模式启动带热加载特性的 Nuxt 服务:
nuxt
// 或
npm run dev
发布部署
Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署。
服务端渲染应用部署
部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt
命令,而应该先进行编译构建,然后再启动 Nuxt 服务,可通过以下两个命令来完成:
nuxt build
nuxt start
推荐的 package.json
配置如下:
{
"name": "my-app",
"dependencies": {
"nuxt": "latest"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
}
}
提示: 建议将 .nuxt
加入 .npmignore
和 .gitignore
文件中。
静态应用部署
Nuxt.js 可依据路由配置将应用静态化,使得我们可以将应用部署至任何一个静态站点主机服务商。
可利用下面的命令生成应用的静态目录和文件:
npm run generate
这个命令会创建一个 dist
文件夹,所有静态化后的资源文件均在其中。
如果你的项目需要用到动态路由,请移步 generate配置API 了解如何让 Nuxt.js 生成此类动态路由的静态文件。
注意:使用 nuxt generate
静态化应用的时候, 传给 asyncData() 和 fetch() 方法的上下文对象 不会包含 req
和 res
两个属性。
单页面应用程序部署 (SPA)
nuxt generate
在 build/generate 时间内仍然需要SSR引擎,同时具有预渲染所有页面的优势,并具有较高的SEO优化和页面加载能力。 内容在构建时生成。例如,我们不能将它用于内容依赖于用户身份验证或实时API的应用程序(至少对于第一次加载)。
SPA应用的想法很简单! 使用时启用SPA模式 mode: 'spa'
或 --spa
,并且我们运行打包,生成在导报后自动启动,生成包含常见的meta和资源链接,但不包含页面内容。
因此,对于SPA部署,您必须执行以下操作:
- 将
nuxt.config.js
中的mode
更改为spa
。 - 运行
npm run build
. - 自动生成
dist/
文件夹,部署到您的服务器,如Surge,GitHub Pages或nginx。
另一种可能的部署方法是在spa
模式下将Nuxt用作框架中的中间件。这有助于减少服务器负载,并在无法进行SSR的项目中使用Nuxt。
请参考 如何在 Heroku 上部署? 来查看更多部署信息。
请参考 如何在 GitHub Pages 上部署? 查看如何部署到GitHub页面的更多详细信息。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论