项目总结:vue.js2.5饿了么APP(7)项目部署与总结

说明:本总结来源于慕课网 @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服务器 整个项目就跑起来了。在真实的项目环境中,这些接口可以指向后端写好的接口地址即可。

总结:简单的项目演示可以自己写一个node.js服务,通过express搭建服务,写好接口路由就可以正确请求到数据。

三、部署到云服务器

 

四、nginx配置多项目部署方案

 

更新ing...后续代码也会放在GitHub上

展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值