美文网首页
前端vue项目本地dist文件调试说明

前端vue项目本地dist文件调试说明

作者: 小小烦恼 | 来源:发表于2020-04-01 16:52 被阅读0次

一,本地安装node包

node包下载地址:

https://nodejs.org/zh-cn/download/

image.png

二,本地安装淘宝镜像:

npm i -g cnpm --registry=https://registry.npm.taobao.org
ps:基于node开发的应用在用npm命令下载很慢,可以使用淘宝镜像代理。

三,运行windows命令行,cd到项目dist文件目录下,安装node服务运行包

1,安装Express:$ cnpm install express --save

Express:是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架

2,安装Http-proxy-middleware:$ cnpm install http-proxy-middleware --save

Http-proxy-middleware:用于后台将请求转发给代理服务器

拷贝一份server.js与dist同级,代码如下

/**
 * 线上启动web服务器配置
 * @type{createApplication}
 */
var express=require("express");
var proxy=require('http-proxy-middleware');
var app=express();
/**
 * 线上监听的端口配置
 */
app.use(express.static("dist")).listen(9886);
// Add middleware for http proxying

/**
 * 线上接口重定向配置
 * @type{HPM}
 */
var apiProxy=proxy('/api',
    {
target:'http://39.100.6.81:20002/',changeOrigin:true
    }
);
//将服务器代理到localhost:8080端口上[本地服务器为localhost:3000]
app.use('/api/*', apiProxy);

可以修改监听的端口号和后台服务地址

命令行运行 node server.js

就可以访问前端打包后的页面啦!

相关文章

网友评论

      本文标题:前端vue项目本地dist文件调试说明

      本文链接:https://www.haomeiwen.com/subject/lguauhtx.html