Vue.js教程
9.11 命令
阅读(

Vue.js 基础

Vue.js 过渡和动画

Vue.js 可复用性和组合

Vue.js 工具

Vue.js 模块化

Vue.js 响应式系统原理

Vue.js API

Vue.js 服务器端渲染 SSR

Vue.js 服务端渲染 Nuxt.js

Nuxt.js简介

Nuxt.js安装

Nuxt.js目录结构

Nuxt.js配置

Nuxt.js路由

Nuxt.js视图

Nuxt.js异步数据

Nuxt.js资源文件

Nuxt.js插件

Nuxt.js Vuex状态树

Nuxt.js命令

Nuxt.js 提供了一系列常用的命令, 用于开发或发布部署。

命令列表

命令 描述
nuxt 启动一个热加载的Web服务器(开发模式)localhost:3000
nuxt build 利用webpack编译应用,压缩JS和CSS资源(发布用)。
nuxt start 以生成模式启动一个Web服务器 (nuxt build会先被执行)。
nuxt generate 编译应用,并依据路由配置生成对应的HTML文件 (用于静态站点的部署)。

你可以将这些命令添加至package.json

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

这样你可以通过npm run <command>来执行相应的命令。如:npm run dev

开发模式

可通过以下命令以开发模式启动带热加载特性的 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()方法的上下文对象不会包含reqres两个属性。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验