vue-cli打包

vue有自己的配套工具。

而vue-cli可以很方便自动架构vue的东西。

当使用vue-cli开发完上线时，可以使用npm run build 简单的打包。

打包的文件都在dist里，直接把这个文件里的文件上线即可。

打包已经把文件压缩和合并，还有文件名哈希等处理，所以一般默认打包方式会使文件难以阅读

，这样也可以防止被别人简单的，阅读，就是不利于浏览器线上排查问题，但这样可以使用前端日志等方式解决。

文件名哈希，便于静态文件不会存在缓存等问题。

如果需要测试打包文件，可以编写一个简单的node服务文件。

var express = require('express');
var config = require('./config/index');

var port = process.env.PORT || config.build.port;

var app = express();

var router = express.Router();

router.get('/', function(req, res, next) {
  req.url = '/index.html';
  next();
});
app.use(router);
app.use(express.static('./dist'));

/* mockJs--模拟数据获取 */
const data = require('./data.json');
const apiRouter = express.Router();

apiRouter.get('/seller', function (req, res, next) {
  res.send({
    errno: 0,
    data: data.seller
  });
});

apiRouter.get('/goods', function (req, res, next) {
  res.send({errno: 0, data: data.goods});
});

apiRouter.get('/ratings', function (req, res, next) {
  res.send({errno: 0, data: data.ratings});
});

app.use('/app', apiRouter);

/* 监听端口 */
module.exports = app.listen(port, function(err) {
  if (err) {
    console.log(err);
    return false;
  }
  console.log('Listen at http://localhost:' + port + '
');
});

相关推荐