为什么vue-cli创建的build文件下没有dev-server.js文件

本文介绍如何在新版Vue中通过webpack.dev.conf.js配置路由,代替已移除的dev-server.js。通过Express设置API路由,实现数据服务接口。

具体描述

  • 在新版本的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
                })
              })
            }
在 `package.json` 文件中定义了多个脚本命令,每个都有特定用途。选择合适的启动命令取决于当前的工作场景以及目标环境。 ### 脚本解释 1. **开发调试阶段** - `"local": "vue-cli-service serve --mode local"` 这个命令是以“local”模式运行应用,适合本地测试和快速迭代使用。 - `"dev": "vue-cli-service serve --mode dev"` 开发模式下运行应用程序。“dev”通常表示正式开发流程中的状态,适用于多人协作或更接近实际部署前的状态模拟。 - `"front": "vue-cli-service serve --mode front"` 可能是一个针对纯前端展示的特殊模式设定,用于分离前后端交互时仅渲染页面内容的情况。 2. **构建打包阶段** - `"build:prod": "vue-cli-service build --mode prod"` 构建生成最终产物至生产环境中使用的文件夹内,包含压缩后的静态资源等,性能最优考虑。 - `"build:stage": "vue-cli-service build --mode stage"` 类似于预发布版本创建过程,一般会经过详细验证后再投入线上运营之中。 - `"build:dev": "vue-cli-service build --mode dev"` 根据需求定制化程度较高的开发者专用打包方案,保留较多调试信息方便排查问题。 - `"build:static": "vue-cli-service build --mode static"` 主要是导出完全独立于服务器支持的HTML+CSS+JS形式站点,非常适合CDN分发等情况下的单页程序(SPA)。 3. **辅助工具及清理功能** - `"preview": "node build/index.js --preview"` 打包完成后提供可视化界面浏览已制作好的成果效果的一种快捷手段。 - `"lint": "eslint --ext .js,.vue src"` 对源码进行语法规范校验工作,保证团队成员遵守一致编码风格的同时减少潜在隐患发生几率。 - `"clean": "rimraf node_modules"` 清理掉整个依赖库缓存区以便重新安装最新组件或者解决因残留数据引发异常状况的有效途径之一。 --- ### 推荐做法 对于日常学习研究或者是刚开始接触该项目的朋友来说,“dev”模式是最常用也是最简便的选择: ```bash npm run dev ``` 它能够实时更新更改结果并且集成了热替换机制(HMR),极大地提高了工作效率! 如果您准备上线项目,则需切换到对应的生产环境下执行相应的编译任务,例如: ```bash npm run build:prod ``` 最后再通过指定的方式上传至远程主机供大众访问体验。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值