Vue之通过http服务打开build后的项目

来源：互联网发布：阿里郎电影百度云编辑：程序博客网时间：2024/05/17 01:08

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

port: 9000,

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

var express = require('express');//获取expressvar config = require('./config/index');//获取根目录config下的index.jsvar port = process.env.PORT || config.build.port;//打开的端口号等于当前环境或上面index.js里增加的那个portvar 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 http://localhost:' + port + '\n')});

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

node product.sever.js

第四，通过localhost: 9000访问就可以看到项目了

阅读全文

0 0