具体描述

  • 在新版本的Vue开发中,通过vue-cli创建的build文件夹下面已经没有了旧版本中的dev-server.js文件,那么如果我么需要将旧项目升级需要添加一些路由设置该怎么办呢

原因

  • 新版本的vue已将dev-server.jswebpack.dev.conf.js合并,若要写路由相关配置需要找到webpack.dev.conf.js中的devServer对象进行相关配置

具体方法

            // webpack.dev.conf.js
            // 通过express导入路由
            const express = require('express')
            const app = express()
            var appData = require('../data.json')
            // json卖家数据
            var seller = appData.seller
            // json商品数据
            var goods = appData.goods
            // json评论数据
            var ratings = appData.ratings
            // 编写路由
            var apiRoutes = express.Router()
            // 所有通过接口相关的api都会通过api这个路由导向到具体的路由
            app.use('/api', apiRoutes)
            // 找到devServer对象并在其后添加相关路由设置
            before (app) {
              app.get('/api/seller', function (req, res) {
                // 服务端收到请求后返回给客户端一个json数据
                res.json({
                  // 当我们数据正常时,我们通过传递errno字符为0表示数据正常
                  errno: 0,
                  // 返回json中的卖家数据
                  data: seller
                })
              })
              app.get('/api/goods', function (req, res) {
                res.json({
                  errno: 0,
                  data: goods
                })
              })
              app.get('/api/ratings', function (rea, res) {
                res.json({
                  errno: 0,
                  data: ratings
                })
              })
            }
Logo

前往低代码交流专区

更多推荐