Vue-cli开启的服务内部写 node 接口

发表于 | 更新于: | 分类于 | | 热度 ℃
  • 在我们的开发中很多时候都是前后端分离，但是在一些个别的案例中也不需要开启两个 node 服务（这里也有一个问题就是开启两个端口会有跨域的问问）
  • 跨域问题在前面获取数据的 axio 说过就不说了
  • 那么我们能不能把 node 后台服务也写到 vue-cli 开启的服务中呢？ 能 那我们就来吧
  1. 在 vue-cli 中我也不知道他有没有 expore 这个包 那就自己装一下吧有没有都好
  2. 在项目文件夹内 创建一个名为 server 的文件夹 在里面新建 router.js 文件 (文件夹名和位置自己喜欢着么来就着么来)
  3. 在 router 文件里面写接口和业务逻辑
1
2
3
4
5
6
7
8
9
10
// 这里我就简单的写一个接口这些学过node都懂不多说
const express = require('express')

const router = express.Router()

router.get('/yhf/abc', (req, res) => {
  res.send('欢迎访问 Node 服务器数据 API 接口！')
})

module.exports = router
  1. 如何调用 router 呢？（我们找到 build/webpack.dev.conf.js）（说一下为什么是这个文件，在旧版本呢就是在 build/sev-server.js 中配置的，在新版本中去除了这个配置文件改为了前面的那个 webpack 配置文件）
  • 1.找到了这个文件后 第一步肯定是引包啦 要加在 const portfinder = require(‘portfinder’) 的后面
1
2
3
const express = require('express') express包
const app = express.Router() 开启服务 这个自己喜欢吧
const router = require('../server/router')  你自己的接口包
  • 2.第二步当然就是配置啦 （找到 devServer 大约在 25 行左右那里）
1
2
3
4
5
6
7
8
9
// 加入这一段代码 本来是没有before的要自己加
before(app) {
    // 这个方法是直接在这里自己写接口
      app.get('/api/getDiscList',(req,res) => {
        res.send("欢迎来的node服务")
      })
    //   这个是外部引入
      app.use(router)
    }
-------------本文结束感谢您的阅读-------------
0%