【Vue】Vue之通过http服务打开build后的项目解析
程序员文章站
2023-12-12 08:19:04
【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服务
第四,通过 localhost: 9000 或者 端口号:9000 访问就可以看到项目了