2024年Nuxt(1)，2024年最新阿里面试p7

最新推荐文章于 2024-08-27 10:42:50 发布

2401_84447417

最新推荐文章于 2024-08-27 10:42:50 发布

阅读量780

点赞数 25

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84447417/article/details/138683137

版权

程序员专栏收录该内容

151 篇文章 0 订阅

订阅专栏

最后

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

// 项目初始配置，自己看着选，用什么选什么不懂就选 None，后面也可以装的。

? Project name: nuxt-test

? Programming language: JavaScript

? Package manager: Npm

? UI framework: None

? Nuxt.js modules: Axios - Promise based HTTP client

? Linting tools: (Press to select, to toggle all, to invert sele

ction)

? Testing framework: None

? Rendering mode: Universal (SSR / SSG)

? Deployment target: Server (Node.js hosting)

? Development tools: jsconfig.json (Recommended for VS Code if you’re not using

typescript)

? What is your GitHub username? dengzemiao

? Version control system: None

…等待一段时间，就会提示创建项目成功

🎉 Successfully created project nuxt-test

// 如果是开发中，运行 npm run dev 就可以，开发者模式

To get started:

cd nuxt-test

npm run dev

// 如果是需要发布到线上了，需要先 build 在 start 才能正式发布

To build & start for production:

cd nuxt-test

npm run build

npm run start

四、Nuxt.js 本地运行

这篇文章只讲 创建项目 到 发布服务器，以及服务器怎么部署才能通过服务器访问，其他项目细节配置放在其他文章中去写。
创建完成项目之后，可以先运行项目一下，用上面 To get started 或 To build & start for production 中的方式运行起来项目，只是前者是 development 模式，后者是 production 模式。

dengzemiaodeMacBook-Pro:test dengzemiao$ cd nuxt-test

dengzemiaodeMacBook-Pro:nuxt-test dengzemiao$ npm run dev

nuxt-test@1.0.0 dev /Users/dengzemiao/Desktop/Project/web/test/nuxt-test

nuxt

╭───────────────────────────────────────╮

│ │

│ Nuxt @ v2.14.12 │

│ │

│ ▸ Environment: development │

│ ▸ Rendering: server-side │

│ ▸ Target: server │

│ │

│ Listening: http://localhost:3000/ │

│ │

╰───────────────────────────────────────╯

然后通过上面的 http://localhost:3000/ 打开浏览器进行访问，但是这个是开发环境。

在 pages 里面的 .vue 文件都会被自动转成路由，文件夹也是一样。
例如：项目 pages 文件夹里面有个 index.vue 文件，它会被编译成 index.html，在路由中也就是 /index，可以尝试修改 index.vue 里面的内容，或者新建一个 .vue 文件进行测试内容。
例如：我在 pages 里面创建一个测试文件 dzm.vue，运行起来项目，访问的路径就是 http://localhost:3000/dzm

dzm 测试页面 {{ env }}

五、Nuxt.js 直接 `ip` 访问项目(正式和测试都适用)

运行开发环境 $ npm run dev

╭───────────────────────────────────────╮

│ │

│ Nuxt @ v2.14.12 │

│ │

│ ▸ Environment: development │

│ ▸ Rendering: server-side │

│ ▸ Target: server │

│ │

│ Listening: http://localhost:3000/ │

│ │

╰───────────────────────────────────────╯

运行正式环境 $ npm run build + $ npm run start

╭──────────────────────────────────────────╮

│ │

│ Nuxt @ v2.14.12 │

│ │

│ ▸ Environment: production │

│ ▸ Rendering: server-side │

│ ▸ Target: server │

│ │

│ Memory usage: 29.1 MB (RSS: 73.1 MB) │

│ │

│ Listening: http://localhost:3000/ │

│ │

╰──────────────────────────────────────────╯

通过上面的两个运行的结果，得到的地址都是 http://localhost:3000/，这个是固定本地 localhost:3000 才可以进访问，需要改成支持本地 ip 也能访问，也就是你拿到本机电脑的 ip 加上端口也能进行访问到，例如: http://10.0.93.169:3000
找到 nuxt.config.js，添加下面代码：

export default {

head: {…},

css: […],

// 配置服务器（主要是这个配置）

server: {

// port: 8000, // default: 3000

host: ‘0.0.0.0’, // default: localhost (推荐)

// host: ‘0’, // 等于 host: ‘0.0.0.0’ 这样配置，在mac上这么配置没问题，但是在window上这么配置有报错。

timing: false

再次运行项目，正式或测试都行，访问地址就会变成本机的 ip 地址加端口：

╭─────────────────────────────────────────╮

│ │

│ Nuxt @ v2.14.12 │

│ │

│ ▸ Environment: development │

│ ▸ Rendering: server-side │

│ ▸ Target: server │

│ │

│ Memory usage: 29.4 MB (RSS: 74 MB) │

│ │

│ Listening: http://10.0.93.169:3000 │

│ │

╰─────────────────────────────────────────╯

本地运行项目就到这里结束了，下面需要将项目发布到服务器运行起来。

四、Nuxt.js 上传服务器（Nginx + Node + PM2）

下面的这些操作如果需要测试，可以放在本地机器上进行搭建，把本地电脑当服务器使使。
服务器 安装 Nginx + Node + PM2。
Nuxt.js 是依赖 Node，所以 服务器 需要安装 Node，装了 Node 就会自带 NPM，然后通过 NPM 安装 PM2:

$ npm install -g pm2

// 可以通过 -h 查询使用方式

$ pm2 -h

PM2 是 Node 的进程管理工具。为啥用这个？举个例子：运行项目之后，命令行窗口是不能关闭的，如果关闭了就无法访问这个项目地址了，所以需要支持关闭命令行窗口，运行的项目依然能够访问，也就是后台挂起进程，PM2 就可以做到这个事情。

安装好上面环境，在 Nginx 根目录里面通过 Git 拉下来 Nuxt.js 源码，可以新开文件夹存放也是可以的，随你自己

$ git clone xxxxx.git

// 如果存在代码就拉一下代码保持最新

$ git pull

这里说一下，在网上搜一下会搜到很多只需要导入几个文件就可以运行项目的文章，但是这种方式有时候会出现 编译函数找不到、资源文件找不到 之类的问题，所以如果不是特别熟悉 Nuxt.js 的话，直接将整个项目拉下来使用，不需要去单独导入某些文件，这样也完美的避开一些细节上的坑，网上的文章一般都是推荐导入下面几个文件：

.nuxt

static

nuxt.config.js

package.json

package-lock.json