浅谈vue-cli加载不到dev-server.js的解决办法

在使用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)
 })
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue-cli脚手架build目录中的dev-server.js配置文件

    本文系统讲解vue-cli脚手架build目录中的dev-server.js配置文件 1.这个配置文件是命令npm run dev 和 npm run start 的入口配置文件,主要用于开发环境 2.由于这是一个系统的配置文件,将涉及很多的模块和插件,所以这部分内容我将分多个文章讲解,请关注我博客的其他文章 3.关于注释 •当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 4.上代码 // 导入check-versions.js文件,并且执行导入的函数,用

  • 浅谈Vue的加载顺序探讨

    在Vuejs 1.0版本中,如果父子组件进行配合,它们的生命周期执行具有如下特点: 1. created总是先父后子 生命周期函数created总是按照从父到子的顺序依次执行,但是兄弟之间没有严格按照这样的顺序执行,估计是采用了异步函数,不仅如此,子组件在父组件中的插入顺序也是随机的,并没有什么特别的规律.假定子组件的引用顺序如下: <div class="container"> <child-c1 v-ref:child1></child-c1>

  • 浅谈angular懒加载的一些坑

    浅谈angular懒加载的一些坑

    写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包压缩到一个文件中,在页面初次访问的时候加载,造成页面初始载入缓慢,在此基础上,提出按需加载,即只有当用户访问某个模块的时候,该模块的脚本才会加载. 工具类: 项目使用grunt打包根据AMD规范,使用grunt-contrib-requirejs来压缩合并模块,同时用ocLazyLoad来完成ang

  • 浅谈hibernate急迫加载问题(多重外键关联)

    数据库结构如下 strategy中有外键member_id(关联member表)外键strategy_category(关联category表)而member表中有外键position_id(关联positons表) 如果前台页面直接查询stategy表中内容我们hql语句如果这么写 Stringhql="FromStrategywhereid=:id"; 控制台会报nosession错误这是因为hibernate默认懒加载只有我们需要的时候才会将关联的对象加载出来这里在我们前台需要取

  • Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法

    Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法

    摘要: 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() 方法可以解决这个问题. 1. Bootstrap 模态对话框和简单使用 <div id="myModal" class="modal hide fade"> <div class="moda

  • 浅谈Vue CLI 3结合Lerna进行UI框架设计

    当前大部分UI框架设计的Webpack配置都相对复杂,例如 Element. Ant Design Vue和Muse-UI等Vue组件库.例如Element,为了实现业务层面的两种引入形式( 完整引入 和 按需引入 ),以及抛出一些可供业务层面通用的 utils . i18n 等,Webpack配置变得非常复杂.为了简化UI框架的设计难度,这里介绍一种简单的UI框架设计,在此之前先简单介绍一下 Element 的构建流程,以便对比新的UI框架设计. 一般组件库的设计者将引入形式设计成 完整引入

  • 浅谈Spring Context加载方式

    Spring 加载方式 对于可执行文件方式,我们一般的加载Spring 配置的方式是 ClassPathXmlApplicationContext public static void main(String[] args) { ClassPathXmlApplicationContext xmlApplicationContext = new ClassPathXmlApplicationContext("classpath:spring-context.xml"); DemoSer

  • 浅谈SpringBoot Bean加载优先级的问题

    目录 Bean加载优先级的问题 同一个类中加载顺序 @DependsOn控制顺序 @Order不能控制顺序 Spring控制Bean加载顺序 使用Spring @Order控制bean加载顺序 使用Spring @DependsOn控制bean加载顺序 小结一下 Bean加载优先级的问题 spring容器载入bean顺序是不确定的,spring框架没有约定特定顺序逻辑规范.但spring保证如果A依赖B(如beanA中有@Autowired B的变量),那么B将先于A被加载. 同一个类中加载顺序

  • 浅谈vue首屏加载优化

    本文介绍了浅谈vue首屏加载优化,分享给大家,具体如下: 库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前 首先我们在正常情况下build 优化 1. 按需加载 当前流行的UI框架如iview,muse-ui,Element UI都支持按需加载,只需稍微改动一下代码. 修改前: import MuseUI from 'muse-ui' import 'muse-ui/dist/muse-ui.css' imp

  • 浅谈vue项目优化之页面的按需加载(vue+webpack)

    浅谈vue项目优化之页面的按需加载(vue+webpack)

    通过vue写的单页应用时,可能会有很多的路由引入.当打包构建的时候,javascript包会变得非常大,影响加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了.这样会大大提高首屏显示的速度,但是可能其他的页面的速度就会降下来.结合Vue的异步组件和webpackde code splitting feature,轻松实现路由组件的懒加载. 就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了,这

  • 浅谈vue中组件绑定事件时是否加.native

    组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- <mt-field label="用户名" placeholder="请输入用户名"></mt-field> --> <input type="text" @keyup.native="show($event)

随机推荐