vue的打包命令是npm run build,打包完直接打开页面是不行的,只能看到加载的静态资源,需要启动一个HTTP服务,然后访问到打包后dist目录下的文件才能看到完整的项目,方法如下:
第一,在根目录下config/index.js中增加端口port
port: 9000,
第二,根目录下建一个启动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 http://localhost:' + port + '\n')
});
第三,cmd进入根目录文件夹,使用node启动http服务
node product.sever.js
第四,通过localhost: 9000访问就可以看到项目了