在使用 vue 开发过程中, 难免需要去本地数据地址进行请求, 而原版配置在 dev-server.js 中, 新版
vue-webpack-template
已经删除 dev-server.js, 改用 webpack.dev.conf.js 代替, 所以 配置本地访问在 webpack.dev.conf.js 里配置即可
- #webpack.dev.conf.js
- // 首先
- // nodejs 开发框架 express, 用来简化操作
- const express = require(express)
- // 创建 node.js 的 express 开发框架的实例
- const app = express()
- // 引用的 json 地址
- var appData = require(../data.json)
- // json 某一个 key
- var goods = appData.result
- var apiRoutes = express.Router()
- app.use(/api, apiRoutes)
1. get 请求配置
在
const portfinder = require(portfinder)
后添加
- #webpack.dev.conf.js
- // 在 devServer 选项中添加以下内容
- before(app) {
- app.get(/api/someApi, (req, res) => {
- res.json({
- // 这里是你的 json 内容
- })
- })
- }
注意: 修改配置文件完毕后, 需要重新运行命令 npm run dev 即可
2. post 请求配置
如果要配置 post 请求, 需要在该文件夹配置如下:
- #webpack.dev.conf.js
- apiRoutes.post(/foods, function (req, res) { // 注意这里改为 post 就可以了
- res.json({
- error: 0,
- data: foods
- });
- })
- // 在组件里面
- #...vue
- created () {
- this.$http.post(http://localhost:8080/api/foods).then((res) => {
- console.log(res)
- })
- }
来源: http://www.bubuko.com/infodetail-2507588.html