npm run build 打包后,如何运行在本地查看效果(Nginx服务)

本文介绍了Nginx作为轻量级Web服务器的优势,包括其并发处理能力和在中国大陆的广泛应用。详细讲解了Nginx的下载、启动和停止操作,以及如何通过简单的配置预览项目,对比XAMPP,Nginx提供了更便捷的本地开发环境。

        这段时间,研究了一下vue 打包的很慢的问题。但是当我 npm run build 打包后,在本地查看效果的时候,活生生被我老大鄙视了,因为我打开了XAMPP。他说:你怎么不用Nginx啊?用这个一堆的路径问题!!!!!!

然后我就去研究了Nginx 。。。我原谅我老大了。

一.初识nginx

Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等

二.nginx下载

官方网址:http://nginx.org/en/download.html

下载完成以后,得到nginx压缩包; 

三、nginx启动

注意不要直接双击nginx.exe,这样会导致很多问题。

我们使用命令行工具进行nginx的启动、停止和重启工作。

使用Win+R快捷键打开命令行窗口,并切换到nginx.exe所在的目录,我们使用start nginx命令来启动nginx。

我们使用nginx -s stop来快速停止nginx,使用nginx -s quit 完整的停止nginx。

四、运行预览

在执行cnpm run build命令之前,不需要改任何东西,就和cnpm run dev 一样的单纯。

 

难道不需要改配置吗?不需要!!!!但是我们还是来看看Nginx的conf目录下的nginx.conf文件

 

 

怎么查看效果呢?server_name+listen  =====>http://localhost:8089,回车就可以啦!比XAMPP方便好用太多了。什么配置都不需要!!!

 

转载于:https://www.cnblogs.com/qiu-Ann/p/9996910.html

### 本地打包与跨设备访问配置 在完成 `npm run build` 打包后,生成的 `dist` 文件夹包含了前端项目的静态资源文件。为了通过 IP 地址让其他电脑访问该项目,需要将这些静态资源部署到一个 HTTP 服务器上,并确保服务器能够被网络中的其他设备访问[^1]。 以下是实现这一目标的具体方法: #### 1. 使用 Node.js 的 Express 框架搭建本地服务器 Express 是一个轻量级的 Web 框架,可以用来快速搭建一个 HTTP 服务器以提供静态资源文件。以下是一个示例代码: ```javascript const express = require('express'); const path = require('path'); const app = express(); // 指定 dist 文件夹为静态资源目录 app.use(express.static(path.join(__dirname, 'dist'))); // 捕获所有路由请求并返回 index.html app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'dist', 'index.html')); }); // 监听端口 const PORT = 3000; app.listen(PORT, () => { console.log(`Server is running on http://localhost:${PORT}`); }); ``` 此代码会启动一个 HTTP 服务器,监听端口 3000,并将 `dist` 文件夹中的内容作为静态资源提供给客户端访问[^2]。 #### 2. 获取本机 IP 地址 为了让其他设备访问你的项目,你需要知道当前设备的局域网 IP 地址。可以通过以下方式获取: - **Windows**: 打开命令提示符,输入 `ipconfig`,查找 `IPv4 Address`。 - **macOS/Linux**: 打开终端,输入 `ifconfig` 或 `ip addr`,查找 `inet` 字段下的非 `127.0.0.1` 的地址。 假设你的 IP 地址为 `192.168.1.100`,那么其他设备可以通过浏览器访问 `http://192.168.1.100:3000` 来查看你的项目[^1]。 #### 3. 确保防火墙允许外部访问 某些操作系统默认启用了防火墙,可能会阻止其他设备访问你的服务器。需要手动配置防火墙规则以允许指定端口(如 3000)的流量通过。例如,在 Linux 上可以运行以下命令: ```bash sudo ufw allow 3000 ``` 或者在 Windows 防火墙设置中添加一个新的入站规则,允许 TCP 流量通过端口 3000[^2]。 #### 4. 测试跨设备访问 确保两台设备连接到同一个局域网,然后在另一台设备的浏览器中输入 `http://<你的IP地址>:3000`,即可访问你打包后的项目。 --- ### 注意事项 - 如果项目使用了 HTTPS,可能需要额外配置 SSL 证书。 - 在生产环境中,建议使用更专业的服务器软件(如 Nginx 或 Apache)来托管静态资源文件。 - 如果需要公网访问,可以考虑使用动态域名解析服务(如 No-IP 或 Ngrok)或将项目部署到云服务器上。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值