---
title: "Nuxt 2：从终端到浏览器"
description: "我们如何改变开发者体验，停止在终端和浏览器之间切换。"
canonical_url: "https://nuxt.zhcndoc.com/blog/nuxtjs-from-terminal-to-browser"
---
# Nuxt 2：从终端到浏览器

> 我们如何改变开发者体验，停止在终端和浏览器之间切换。

> Nuxt 是一个基于 Vue.js 的框架，可以使用**相同的目录结构和约定**创建各种类型的 web 应用程序：通用应用、单页面应用、渐进式 Web 应用或静态生成应用。

*ℹ️ 这些功能都在 v2.8.0 版本中可用。*

## 问题

1. 使用 Webpack 或任何打包工具开发 JavaScript 应用程序时，需要在浏览器和终端之间切换以进行调试。
2. 在服务器渲染应用程序时，使用 `console.log` 进行调试需要记住刷新页面时日志将显示在终端上。

## 解决方案

1. 在浏览器中直接显示并以炫酷的方式显示 Webpack 构建状态。

![forward-webpack-build-state](https://nuxt.zhcndoc.com/assets/blog/forward-webpack-build-state.gif)

1. 当项目变得更大且重构时间更长时，热模块替换（Hot Module Replacement）同样非常有用。

![nuxt-build-indicator-hmr](https://nuxt.zhcndoc.com/assets/blog/nuxt-build-indicator-hmr.gif)

1. 在开发模式下将服务器端渲染（SSR）日志转发到浏览器。

![nuxt-ssr-logs-forwarding](https://nuxt.zhcndoc.com/assets/blog/nuxt-ssr-logs-forwarding.gif)

## Nuxt 愿景

这些改变的目的是只使用终端进行命令操作。

现在你可以专注于你的代码和其视觉结果 🙂

> 懒惰一点，聪明一点，选择 Nuxt。

链接：

- Nuxt 2 docs: [https://v2.nuxt.com](https://v2.nuxt.com)
- GitHub: [https://github.com/nuxt/nuxt.js](https://github.com/nuxt/nuxt.js)
- Loading Screen source code: [https://github.com/nuxt/loading-screen](https://github.com/nuxt/loading-screen)
- Twitter: [https://x.com/nuxt_js](https://x.com/nuxt_js)


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.