欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

【Vue】Vue之通过http服务打开build后的项目解析

程序员文章站 2023-11-29 11:59:28
【vue】vue之通过http服务打开build后的项目 视频参考(仿饿了么项目——nodejs调试和webpack配置介绍):链接:https://pan.baidu.co...

【vue】vue之通过http服务打开build后的项目

视频参考(仿饿了么项目——nodejs调试和webpack配置介绍):链接:https://pan.baidu.com/s/1bqlzsfkrs8fpyzejqx55kw 密码:2owe

vue的打包命令是npm run build,打包完直接打开页面是不行的,只能看到加载的静态资源,需要启动一个http服务,然后访问到打包后dist目录下的文件才能看到完整的项目,方法如下:
第一,在根目录下config/index.js中增加端口port

port: 9000,
1

第二,根目录下建一个启动http服务的文件product.sever.js

var express = require('express');//获取express
var config = require('./config/index');//获取根目录config下的index.js

var port = process.env.port || config.build.port;//打开的端口号等于当前环境或上面index.js里增加的那个port

var app = express();

var router = express.router();//express路由

router.get('/', function (req, res, next) {//返回index.html
  req.url = '/index.html';
  next();
});

app.use(router);//使用路由

var appdata = require('./data.json');//访问json,下面三条都是data.json的数据
var seller = appdata.seller;
var goods = appdata.goods;
var ratings = appdata.ratings;

var apiroutes = express.router();

apiroutes.get('/seller', function (req, res) {//配置接口获取json里的数据
  res.json({
    errno: 0,
    data: seller
  });
});

apiroutes.get('/goods', function (req, res) {
  res.json({
    errno: 0,
    data: goods
  });
});

apiroutes.get('/ratings', function (req, res) {
  res.json({
    errno: 0,
    data: ratings
  });
});

app.use('/api', apiroutes);//使用配置的请求数据接口

app.use(express.static('./dist'));//使用静态文件夹下的文件

module.exports = app.listen(port, function (err) {//监听port端口
  if (err) {
    console.log(err);
    return;
  }
  console.log('listening at https://localhost:' + port + '\n')
});

第三,cmd进入根目录文件夹,使用node启动http服务

【Vue】Vue之通过http服务打开build后的项目解析

第四,通过 localhost: 9000 或者 端口号:9000 访问就可以看到项目了