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

一，本地安装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

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