使用node中的express解决vue-cli加载不到dev-server.js的问题

  在使用vue开发过程中,难免需要去本地数据地址进行请求,而原版配置在dev-server.js中,新版vue-webpack-template已经删除dev-server.js,改用webpack.dev.conf.js代替,所以 配置本地访问在webpack.dev.conf.js里配置即可。

  现在我们就来用node里的express来解决本地数据请求的问题。主要为下面三步:安装express和resource、注册并使用vue-resource、配置express并设置路由规则

  1、安装node的express,和vue-resource

  2、注意: 这里安装vue-resource后需要在main.js注册并使用下

import VueResource from 'vue-resource'
Vue.use(VueResource)

  3、在webpack.dev.conf配置express并设置路由规则

#webpack.dev.conf.js
// 首先在const portfinder = require('portfinder')后添加// nodejs开发框架express,用来简化操作
const express = require('express')
// 创建node.js的express开发框架的实例
const app = express() 
// 引用的json地址
var appData = require('../data.json')
// json某一个key
var goods = appData.resultvar apiRoutes = express.Router()
app.use('/api', apiRoutes)

  (1)get请求配置

#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)})
}

  (3)完整配置

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)//增加express --start
const express = require('express')
const app = express()
var appData = require('../goods.json')
var goods = appData.goods
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
//增加express --endconst devWebpackConfig = merge(baseWebpackConfig, {module: {rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })},// cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,// these devServer options should be customized in /config/index.js
  devServer: {clientLogLevel: 'warning',historyApiFallback: {rewrites: [{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },],},hot: true,contentBase: false, // since we use CopyWebpackPlugin.compress: true,host: HOST || config.dev.host,port: PORT || config.dev.port,open: config.dev.autoOpenBrowser,overlay: config.dev.errorOverlay? { warnings: false, errors: true }: false,publicPath: config.dev.assetsPublicPath,proxy: config.dev.proxyTable,quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {poll: config.dev.poll,},//增加express --start
    before(app) {app.get('/api/goods', (req, res) => {res.json({code: 0,data: goods})})}//增加express --end
  },plugins: [new webpack.DefinePlugin({'process.env': require('../config/dev.env')}),new webpack.HotModuleReplacementPlugin(),new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.new webpack.NoEmitOnErrorsPlugin(),// https://github.com/ampedandwired/html-webpack-pluginnew HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: true}),// copy custom static assetsnew CopyWebpackPlugin([{from: path.resolve(__dirname, '../static'),to: config.dev.assetsSubDirectory,ignore: ['.*']}])]
})module.exports = new Promise((resolve, reject) => {portfinder.basePort = process.env.PORT || config.dev.portportfinder.getPort((err, port) => {if (err) {reject(err)} else {// publish the new Port, necessary for e2e testsprocess.env.PORT = port// add port to devServer configdevWebpackConfig.devServer.port = port// Add FriendlyErrorsPlugindevWebpackConfig.plugins.push(new FriendlyErrorsPlugin({compilationSuccessInfo: {messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },onErrors: config.dev.notifyOnErrors? utils.createNotifierCallback(): undefined}))resolve(devWebpackConfig)}})
})

  4、检测 npm run dev 后,在浏览器地址栏中输入http://localhost:8080/api/goods即可看到数据

  注意:新建goods.json引入时候的路径

  在使用中有个粗心的位置,就是npm run dev的时候总是报错:missing scripts dev,导致项目启动不了。

  考虑到可能是package.json文件里的scripts里面没有dev导致,所以查看,结果却有:

  最后就是粗心导致的问题,原来我是在  cd vueCli 这个目录下去 npm run dev 的,所以肯定会missing scripts dev;改成cd exprice目录下去 npm run dev 就行了。所以一定得细心啊。

 

转载于:https://www.cnblogs.com/goloving/p/8695346.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/486423.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

脑机接口:从基础科学到神经康复

本文转自公众号:脑机接口社区大家好 ,我是米格尔尼科莱利斯,美国杜克大学神经生物学、神经学和生物医学工程教授。今天我将为大家介绍脑机接口和这一技术从基础科学到应用于神经康复的研究历程。首先,我要感谢2020腾讯科学WE大会的…

python安装失败无法访问_错误:由于环境错误而无法安装包错误:[WinError 5]访问被拒绝:...

我试图使用python -m pip install opencv-python -U pip --user将opencv python安装到windows10中的visualstudio代码中,但总是收到错误。希望有人能帮我改正错误。在我尝试了不同的建议,比如将--user放在命令行的末尾PS C:\Users\user\Desktop\sample&g…

从Airbnb的发展历程和网易云的大起大落看IT行业创新(第5周课后作业)

我想先根据个人看法回答“创新是什么?”这个空泛的问题。创新是面对当下的资源条件限制创造出能够满足动态需求或解决动态发展中的问题的新策略。这种实用化定义在大部分邻域都勉强能让定义者自圆其说,对于IT行业算是比较贴切,但是当我们把创…

c++ map 自定义排序_Java学习笔记:Map集合介绍

在介绍它之前先来看看再API文档中是如何介绍它的,看图片:由图片可以看出,Map属于双列集合,每次可以添加一对数据,并且这两个数据具有映射关系。单列集合和双列集合区别一、Map继承体系1.HashMap:存储数据采…

《智能网联汽车技术路线图 2.0》重磅发布

全文共计3644字,预计阅读时间8分钟来源 | 国汽智联(转载请注明来源)编辑 | 蒲蒲11月11日,由北京市人民政府、工业和信息化部、公安部、交通运输部、中国科学技术协会共同主办的2020世界智能网联汽车大会召开。大会现场&#xff0c…

python内存池机制_看过来啦!教你用Python进行内存管理

原标题:看过来啦!教你用Python进行内存管理现在学Python的小伙伴有很多啦!Python语言的发展前景也是有目共睹。小助手今天为大家带来了Python中内存管理的方法,一起来学习一下吧~Python中的内存管理是从三个方面来进行的,一对象的…

毕设ssm商城系统_ssm商城系统(爱淘淘购物)项目源码

ssm商城系统(爱淘淘购物)项目演示本系统采用SSM架构来搭建。服务器:tomcat7java虚拟机:jdk1.7数据库:mysql前端:Vue Bootstrap管理员用户:root root普通用户:jack 123访问路径:http://localho…

科学就是要勇于承认错误:十大错误科学结论盘点

来源: 学术头条人们不会迷信权威,但是大部分会相信“科学”。如何科学地饮食?如何科学地工作?如何科学地休息?“科学”两个字成了人们确认自己正确生活的最大保障。但如果“科学”不正确,那又会怎样呢&…

layui表头样式_layui中table表头样式修改方法

如下所示:layui.use(table, function () {var table layui.table;table.render({elem: #desTable, url: ${ctx}/alarm/queryEventShowScatter, even: true, page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文…

怎么改变表单option标签直接字体大小_不起眼却非常重要的表单交互

表单是什么?是用户和app之间的对话。作为人机交互的一种重要入口,一个好的数据输入方式是很有必要去考虑的。但现实中,我们大多设计师和产品经理前期设计的时候就没有太多的考虑,到最后开发的时候就会发现问题,然后就草…

配置文件详解

[123456localhost Desktop]$ redis-server /etc/redis/redis.conf[123456localhost Desktop]$ redis-cli 得到启动Redis的路径127.0.0.1:6379> config get dir1) "dir"2) "/home/123456/Desktop" 得到requirepass127.0.0.1:6379> config get require…

mysql-front特点_Navicat for MySQL与MySQL-Front比较 [图文]

MySQL GUI工具很多,本文就常用的Navicat for MySQL与MySQL-Front的特色功能做一个详细介绍与比较。(一)MySQL-FrontMySQL-FronMySQL GUI工具很多,本文就常用的Navicat for MySQL与MySQL-Front的特色功能做一个详细介绍与比较。(一)MySQL-FrontMySQL-Fron…

这是关于物理学的最强科普

“唯有宇宙和人类的愚蠢是永恒的”文章来源:撕蛋公众号这是关于物理学的最强科普(完整版) 本文素材主要摘录自加来道雄的《Hypersapce》和丘成桐的《The Shape of Inner Space》。凭籍本文,回顾一下两百年来的科学史,看…

wxpython实例源码_wxpython中复选框的基本使用源码实例

#codingutf-8import wxclass MyFrame(wx.Frame):def __init__(self):wx.Frame.__init__(self,None,-1,"多模测试热补丁工具",size (800,600))panel wx.Panel(self)self.checkbox1 wx.CheckBox(panel,-1,"CCC",(60,20),(200,20)) #复选框1self.checkbox2…

mysql dml影响查询_MySql--DML语句、简单查询和子查询

简要的将MySql中的insert、update、delete和select总结一下。/*****************************DML语言操作数据表**************************************/一、insert语句1、insert value形式insert into table_name value(1, 小明);2、insert set形式insert into table_name se…

pip 不是内部或外部命令 也不是可运行的程序_QT之程序打包发布

1.引言QT开发完之后,如果直接把exe文件发给别人,是没法直接用的,因为会提示缺少很多库,一种方法是把这些库拷贝出来,一起发过去,但是这样不方便且文件很大,所以需要一种文件打包发布的方法。2.环…

华为汪涛:定义5.5G,构建美好智能世界

来源:华为以下是汪涛演讲全文:尊敬的各位来宾,大家早上好!一年来,华为5G解决方案被更多的客户所选择,为世界各地社会经济的可持续发展创造价值,这些都离不开全球客户对我们的关心和支持&#xf…

『电子书』分享一波码农必备编程开发类书籍[转]

分享一些书籍 看到书籍很多,感觉很不错,就收藏下来了,是百度盘的连接,失效的可以评论一下以此更新一下连接. 书籍清单 Python编程快速上手 细说PHP(第2版) Python核心编程(第3版) Linux命令行与shell脚本编程大全(第3版) python高…

mysql排序规则错误_MySQL中“非法混合排序规则”错误的疑难解答

阿波罗的战车更改字符串的一个(或两者)的排序规则以使它们匹配,或者添加一个COLLATE从句到你的表情。这“校对”到底是什么?如下文所述字符集和排序规则:A 字符集是一组符号和编码。一个校对用于比较字符集中字符的一组规则。让我们用一个假想字符集的例…

mybatis代码自动生成器_最近很火的文章自动生成器,python源码公开了(内附python代码)

学了python,但是又不知道可以用来干嘛。开发一个计算器?太low了。开发一个网站?感觉网站涉及太多知识点,一个人搞不定。不用慌,本文介绍一个最近很火的一个文章自动生成器,它是用python写的,能够…