项目总结：vue.js2.5饿了么APP（7）项目部署与总结

最新推荐文章于 2024-07-23 17:06:34 发布

小白Rachel

最新推荐文章于 2024-07-23 17:06:34 发布

阅读量1.3k

点赞数 1

分类专栏：饿了么Vue项目总结文章标签： vue

本文链接：https://blog.csdn.net/sabrina_cc/article/details/107048523

版权

饿了么Vue项目总结专栏收录该内容

7 篇文章 9 订阅

订阅专栏

说明：本总结来源于慕课网 @ustbhuangyi老师的课程《Vue.js2.5+cube-ui重构饿了么App》课程，本博客做了项目总结梳理便于回顾，需要学习的伙伴可以移步学习。与君共勉！

之前章节传送：

项目总结：vue.js2.5饿了么APP（1）概述+项目准备

项目总结：vue.js2.5饿了么APP（2）主要组件实现 - 头部相关组件

项目总结：vue.js2.5饿了么APP（3）主要组件实现 - 购物车相关组件（上）

项目总结：vue.js2.5饿了么APP（4）主要组件实现 - 购物车相关组件（下）

项目总结：vue.js2.5饿了么APP（5）主要组件实现 - 商品详情页部分

项目总结：vue.js2.5饿了么APP（6）主要组件实现 - 评价页+商家页部分

一、项目打包构建&性能优化

1. 打包项目

使用npm run build 会做一些编译构建内部依赖于webpack，他会根据项目的入口js文件，查找所有的依赖，把静态页面分析完毕之后，通过webpack做处理，最后会生成一个dis的目录文件，里面就是一些需要上线的静态资源文件。

dist其中的index.html就是根据源码的index.html生成的，其中依赖了很多css或者js资源

2. 项目体积优化

从下面的显示可以看出css\js名、体积、zip后的体积，还是很大的，其中：

chunk-vendors.js包含了代码中所有的import的第三方的库
app.js包含src自己开发的代码依赖的模块

在package.json中配置report，可以把我们生成的打包文件做一个可视化展示，他会删除dist目录重新做构建，并多了一个report.html文件（资源可视化界面）

"build": "vue-cli-service build",
"report": "vue-cli-service build --report"

可以值观的看出每个资源包的体积情况，不同的js文件会有不同颜色和区块区分，它的面积大小就可以看出它对应体积大小。其中moment.js只使用了一个模块，但是占比比较大，还有cube-ui组件也比较大。

（1）优化moment.js

webpack有一个插件：上下文替，换插件ContextReplacementPlugin可以让我们自定义规则来覆盖xml规则，因此moment可以使用该插件进行替换。修改vue.config.js添加语句：

const webpack = require('webpack')
config.plugin('context')
      .use(webpack.ContextReplacementPlugin,
        [/moment[/\\]locale$/, /zh-cn/])

查看webpack配置成功可以使用命令vue inspect >> output.js 至此可以消除优化moment冗余部分

（2）优化cube-ui

然而cube-ui依然占据比较大的部分，修改方法就是在cube-ui.js中做一些删减即可

Vue.use(TabBar)
Vue.use(Popup)
Vue.use(Dialog)
Vue.use(Scroll)
Vue.use(Slide)
Vue.use(ScrollNav)
Vue.use(ScrollNavBar)

（3）打开查看index.html

打包之后会产生index.html，但是直接打开会报错。需要写一个server打开，如苹果电脑可以使用命令：python -m SimpleHTTPServer 8088,之后使用localhost:8088打开它，Windows使用anywhere（npm install anywhere -g）。

参考链接https://github.com/JacksonTian/anywhere

但是页面没有数据（这是由于异步请求的接口没有处理）因此需要编写小型的server实现接口。

二、搭建本地小型node服务代理接口

添加prod.server.js并添加如下代码。通过启一个express服务来处理项目接口部分使用express.router进行接口代理，获取data.json文件，并且在接口里返回对应的内容，最终会通过app.use()吧所有请求返回json对象，再通过express.static代理静态服务，最后通过一个端口（8900）以及app.listen把服务启起来

const express = require('express')

const app = express()

const appData = require('./data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings
const router = express.Router()

router.get('/seller', function (req, res) {
  res.json({
    errno: 0,
    data: seller
  })
})
router.get('/goods', function (req, res) {
  res.json({
    errno: 0,
    data: goods
  })
})
router.get('/ratings', function (req, res) {
  res.json({
    errno: 0,
    data: ratings
  })
})

app.use('/api', router)
app.use(express.static('./dist'))
const port = process.env.PORT || 8900
module.exports = app.listen(port, function (err) {
  if (err) {
    console.log(err)
    return
  }
  console.log('Listening at http://localhost:' + port + '\n')
})

这时在项目目录执行node prod.server.js. 这时运行localhost:8900就可以看到项目，并且接口seller goods ratings可以实现，至此利用小型的node服务器整个项目就跑起来了。在真实的项目环境中，这些接口可以指向后端写好的接口地址即可。