前端项目打包完成后dist本地起node服务测试运行项目

1、新建文件夹 node-test  将打包dist 文件同步自定义本地服务文件夹node-test 中,安装依赖包。

npm install express serve-static cors

2、新创建服务文件js  server.js  构建链接及端口

const express = require('express');
const path = require('path');
const cors = require('cors');

const app = express();
const PORT = 3000; // 自定义

// ✅ 允许跨域(如果需要)
app.use(cors());

// ✅ 静态资源目录,托管 dist/
app.use(express.static(path.join(__dirname, 'dist')));

// ✅ 解析 manifest.json,返回正确的 CDN 资源路径
app.get('/manifest', (req, res) => {
  const manifest = require('./dist/manifest.json');
  res.json(manifest);
});

// ✅ 兜底路由,返回 index.html(防止刷新 404)
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});


// ✅ 启动服务器
app.listen(PORT, () => {
  console.log(`🚀 Server is running at http://localhost:${PORT}`);
});

3、终端启动服务:

node  server.js

浏览器查看已打包好的项目

### 如何部署和运行 Vue 项目生成的 `dist` 文件夹 #### 部署流程概述 当通过执行 `npm run build` 命令成功构建 Vue 项目后,会在项目根目录下生成一个名为 `dist` 的文件夹。该文件夹包含了经过优化、压缩后的静态资源文件(HTML、CSS 和 JavaScript),这些文件可以直接用于生产环境部署。 为了使已打包好的 Vue 应用能够正常访问并运行,需要将其部署到支持静态文件服务的环境中。以下是具体方法: --- #### 使用本地 HTTP Server 测试 可以通过简单的 HTTP 服务器来测试 `dist` 文件夹中的内容是否可以正常加载。例如,在 Node.js 环境中安装 http-server 工具: ```bash npm install -g http-server cd path/to/your/dist/folder http-server . ``` 启动完成后,默认可以在浏览器地址栏输入 `http://localhost:8080` 来查看应用效果[^1]。 --- #### 将 `dist` 文件夹上传至远程服务器 对于正式上线的需求,通常需要将整个 `dist` 文件夹及其内部所有文件上传到目标服务器上。常见的做法如下: 1. **FTP/SFTP 协议传输** 利用 FTP 或 SFTP 客户端工具(如 FileZilla)连接到服务器,并把 `dist` 文件夹内的全部文件复制粘贴到指定路径。 2. **Git/GitHub Pages 发布** 如果使用 GitHub 托管代码仓库,也可以借助 GitHub Actions 自动化发布功能或者手动提交到 gh-pages 分支实现线上展示[^3]。 3. **CDN 存储分发** 对于大规模流量场景,建议采用 CDN 提供商的服务存储前端资产文件,从而减轻源站压力的同时提高用户体验速度。 无论采取哪种方式,请务必确认 Web 服务器已经正确配置好 MIME 类型以及跨域资源共享策略(CORS),以便客户端能顺利请求所需数据。 --- #### 修改入口 HTML 中相对链接设置 有时由于开发阶段使用的路由模式不同(比如 history mode vs hashbang mode), 导致实际部署时页面刷新会出现404错误等问题。此时就需要调整 Nginx/Apache 等 web server 的 rewrite rules ,让所有的未匹配 URI 请求都重定向回 index.html 页面处理[^2]: ##### Apache .htaccess 示例 ```apacheconf <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> ``` ##### Nginx location block 示例 ```nginx location / { try_files $uri $uri/ /index.html; } ``` 上述更改可确保即使用户直接跳转某个子路径也不会因找不到对应物理文件而失败。 --- #### 注意事项 - 若原工程依赖外部 API 接口调用,则记得同步更新 baseURL 地址指向新的后台服务位置; - 检查图片字体图标等素材引用路径是否有误; - 开启 Gzip/Brotli 数据流压缩技术进一步减少网络传输体积提升性能表现。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值