项目总结 - 构建vue cli3.0+express项目

简介:本篇是记录搭建流程,不过多叙述,搭建的细节,主要以前端为主,项目是主要是为了重构前端代码,后端代码完全复用,还会有篇主要讲node项目的搭建

项目背景:

一个客服项目,原来是react+express实现,现在改为vue+express实现

开发环境前后端同时实现热加载

实现:webpack配置,分开发环境与线上环境: 开发环境前端使用wbepack-dev-server来进行热更新和加载,后端使用nodemon来实现 线上环境使用build出的dist目录挂载到express static上来实现

三种实现方式: 旧版本:在开发时,同时起两个服务webpack-dev-server和api的node-server,使用node-server代理前端页面 新版本:webpack升级webpack-hot-middleware的出现,开发时,使用webpack-hot-middleware在node-server的基础上进行拓展处理 我的另一个想法:也是同时起两个服务webpack-dev-server和api的node-server,使用dev-server来代理node-server的接口,因为vue-cli3没有暴露出webpack的配置文件,在vue-config.js中可配置dev-server的proxy

如果想看前两种具体实现,我会写的,不过是之后占坑~

旧版本实现

// npm script
"start": "node ./node_modules/concurrently/src/main.js --kill-others \"npm run watch-client\" \"npm run dev-server\"",
"watch-client": "node ./webpack/webpack-dev-server.js ",
"dev-server": "nodemon ./app.js | bunyan",

// node-server代理前端路径
router.use('/', fetchUserInfo, async (req, res) => {
  try {
    if (__DEVELOPMENT__) {
      const result = await request.get('http://localhost:8027/view/index.html')
      res.send(result.text)
      return res.end()
    } else {
      res.sendFile('/', {
        root: `${process.cwd()}`,
      }, (err) => {
        if (err) {
          logger.error(`error whild send file, err is : ${err}`)
          res.status(err.status).end()
        }
      })
      return
    }
  } catch (e) {
    logger.error('error in feedback router', e)
  }
})

新版本实现

// npm script
"start": "nodemon index.js | bunyan", // 在index.js中判断

// 使用middleware处理代码。这里不展开讲dev-hot,详情请见我的另一篇blog
if (config.useHotServer) {
  require('./dev-hot').default(app)
} else {
  app.use(
    history({ index: `/index-v${appPackage.version}.html` }),
    express.static(config.buildStaticDir),
  )
}

基于vue-cli3我的实现

//npm script
"serve": "vue-cli-service serve"
"dev-server": "nodemon ./app.js | bunyan"
"start": "node ./node_modules/concurrently/src/main.js --kill-others \"npm run serve\" \"npm run dev-server\"",

//vue.config.js
module.exports = {
  devServer: {
    proxy: 'http://10.1.100.189:8025',
  },
}

部署问题:vue-router不能直接使用express.static

vue到react,node/express挂载vue-router不能直接使用express.static vue-router history模式与express connect-history-api-fallback中间件搭配使用

connect-history-api-fallback是什么:

能够代理请求返回一个指定的页面的中间件

解决什么场景下的问题:

在express的静态文件夹设置为dist目录的时候,出现各种404错误,经过查询,发现当路由模式为history的时候,后端会直接请求地址栏中的文件,这样就会出现找不到的情况,需要结合express的connect-history-api-fallback来处理。

思路:

当请求满足以下条件的时候,该库会把请求地址转到默认(默认情况为index.html)

1.请求方式为GET(前端路由请求的当然要是GET)
2.接受文件类型为text/html(即ajax请求中的dataType)
3.与options.rewrites中提供的模式不匹配(即自定义规则中没写到的)

基础api:

index:配置默认的index页面
rewrites:通过正则配置,配置相关路由
verbose:日志选项
htmlAcceptHeaders:覆盖Accepts,更改请求的dataType配置
disableDotRule

demo:

import history from 'connect-history-api-fallback'
// 需要在express.static上面
app.use(history())
app.use(express.static(path.join(__dirname, '../dist')))

vue-cli3中引入sass

直接安装sass-loader,vue-cli3可以自动识别支持

封装axios请求(代码更易读/错误处理)

使用: await request.get('/api/current') await request.post('/api/message', { messageInfo })

utils/request.js

import axios from 'axios'

async function requestService(url, method = 'GET', params = {}, headers = {}) {
  let ret = {}
  try {
    let query = {}
    let body = {}
    const customHeaders = headers // 这里可以扩展headers
    if (method === 'GET') {
      query = params
    } else {
      body = params
    }
    const res = await axios({
      url,
      method,
      params: query,
      data: body,
      headers: customHeaders,
    })
    ret = res.data
  } catch (err) {
    console.error(`Request ${url} Error `, err.stack)
    throw new Error(JSON.stringify(err.response.data))
  }
  return ret
}

function request(url, params = {}, headers = {}) {
  return requestService(url, 'GET', params, headers)
}

request.get = (url, params = {}, headers = {}) => requestService(url, 'GET', params, headers)
request.del = (url, params = {}, headers = {}) => requestService(url, 'DELETE', params, headers)
request.post = (url, params = {}, headers = {}) => requestService(url, 'POST', params, headers)
request.put = (url, params = {}, headers = {}) => requestService(url, 'PUT', params, headers)
request.patch = (url, params = {}, headers = {}) => requestService(url, 'PATCH', params, headers)

export default request

引入神策数据埋点

具体看另一篇blog,讲述了在项目中遇到的在react/vue/node项目中引入神策数据埋点

引入bridge

utils/ 该项目需要调起相册,相机等功能,需要与native交互,具体看另一篇blog(ps:可能还没写,我先占个坑~)

引入常用的工具方法 Utils

请求 - request.js 时间格式校验 - formatDate.js - 原来使用moment.js,but库太大了 cookie获取 - getCookie etc... 具体看另一篇blog(占坑)

未完待续...

原文链接:segmentfault.com

上一篇:React Native 重构路线图发布
下一篇:Vue中引入TradingView制作K线图

相关推荐

  • 🙋Hanjst汉吉斯特改进+enSafeExpression安全表达式等

    Hanjst汉吉斯特模版语言及模版引擎,近期持续改进升级。 这次改进主要是增加了对安全输出表达式兼容,由于涉及到对软件开发过程中的效率和软件运行效率的平衡和取舍,所以多写了几句,以描述这个权衡利弊对...

    5 个月前
  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vue-cli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    2 年前
  • 通过变量来使用next()在expressjs未来中间件

    cchamberlainuser2791897提出了一个问题:passing variables to the next middleware using next() in expressjs,或许...

    3 年前
  • 谈谈我用在vue-cli3中预渲染遇到的坑

    前言 在开发自己的个人网站的时候后,选择了用vue来开发,不可避免的遇到要对seo做优化。鉴于目前页面也不多,因此首先采用的是预渲染的方式。 本来以为把插件一装,配置一配,咔咔咔就能搞定,结果发现并没...

    6 个月前
  • 记录vue-cli3.0+typescript项目:Eslint+prettier报错以及解决方法

    记录vue-cli3.0+typescript项目:Eslint+prettier遇到的一些报错以及得到的解决方法1、一直报错 error Delete ‘........’,或者是warning D...

    2 个月前
  • 记录vue-cli3.0+typescript项目:Eslint+prettier一些报错以及解决方法

    记录vue-cli3.0+typescript项目:Eslint+prettier遇到的一些报错以及得到的解决方法1、一直报错 error Delete ‘........’,或者是warning D...

    2 个月前
  • 解决vue-cli3配置babel-polyfill的问题

    解决vue-cli3配置babel-polyfill的问题 首先安装babel-polyfill npm install --save @babel/polyfillmain.js中引入,记得要放...

    7 个月前
  • 简要从VUECLI2迁移到VUECLI3,项目选型

    缘由之前在YW公司,经历了一个老项目,vue项目长达2年。开发的过程中,启动就需要5分钟。编译也比较慢。作为一个对开发体验有追求的前端,实在是忍受不了。所以在一次机缘之下,对项目进行了一次升级。

    3 个月前
  • 第1讲 使用vue-cli3.0创建项目

    vue-cli 3.0是基于webpack 4.0之上构建的vue脚手架工具,得益于webpack4.0的零配置特性,使得在使用vue-cli 3.0时,零配置就可以开发和打包vue项目vue-cli...

    1 个月前
  • 笔记:解读express 4.x源码

    此为裁剪过的笔记版本。 原文在此:https://segmentfault.com/a/11... 感谢@YiQi 带来的好文章。我稍作修改,只是为了更加清晰一点点。

    3 年前

官方社区

扫码加入 JavaScript 社区