使用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.result var 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: ,
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 --end const 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-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
}) module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port // Add FriendlyErrorsPlugin
devWebpackConfig.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 就行了。所以一定得细心啊。
使用node中的express解决vue-cli加载不到dev-server.js的问题的更多相关文章
- 解决新版本webpack vue-cli生成文件没有dev.server.js问题
新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...
- 在web.xml中添加配置解决hibernate 懒加载异常
在web.xml添加如下,注意:在配置在struts2的拦截器之前,只能解决请求时出现的懒加载异常:如果没有请求,还需要lazy属性的添加(比如过滤器) <!-- 配置Spring的用于解决懒加 ...
- 在Vue中的load或ready的加载时机
在Vue中的load或ready的加载时机 1.我们来插入一段代码来分析: Js代码如下 <script type="text/javascript"> var app ...
- vue超简单加载字体方法,解决scss难加载字体的问题
vue超简单加载字体方法,解决scss难加载字体的问题 scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法 在App.vue的style标签下引入字体文件后 ...
- vue : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本
问题: 使用命令行安装完成vue/cli后,使用vue ui无法创建demo vue : 无法加载文件 C:\Users\yangx\AppData\Roaming\npm\vue.ps1,因为在此系 ...
- vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案
# vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案 最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化 1,关闭打 ...
- Vue首页加载过慢 解决方案
一.什么导致了首页初步加载过慢:app.js文件体积过大 二.解决方法: 1.Vue-router懒加载 vue-router懒加载可以解决首次加载资源过多导致的速度缓慢问题:vue-router支持 ...
- Vue动态加载异步组件
背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,if ...
- Android中ViewPager+Fragment取消(禁止)预加载延迟加载(懒加载)问题解决方案
转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53205878本文出自[DylanAndroid的博客] Android中Vie ...
随机推荐
- git+jenkins在windows机器上新建一个slave节点【转载】
转至博客:上海-悠悠 前言 我们在跑自动化项目的时候,希望有单独的测试机能跑自动化项目,并且能集成到jenkins上构建任务.如果公司已经有jenkins环境了,那无需重新搭建. 只需在现有的平台基础 ...
- Restful Framework (三)
目录 一.版本 二.解析器 三.序列化 四.请求数据验证 一.版本 回到顶部 程序也来越大时,可能通过版本不同做不同的处理 没用rest_framework之前,我们可以通过以下这样的方式去获取. c ...
- IIS 7/8安装SSL证书
文件说明:1. 证书文件1532113691949.pem,包含两段内容,请不要删除任何一段内容.2. 如果是证书系统创建的CSR,还包含:证书私钥文件1532113691949.key.PFX格式证 ...
- jQuery源码浅析
这几天看了下jQuery源码,有些收获,解答了我以前对jQuery的疑问,现在我把收获分享给大家. 一.jQuery为何弄成自执行函数,以及为何在引用了jquery文件之后,可以通过$或jQuery来 ...
- 2017-2018 ACM-ICPC Northern Eurasia (Northeastern European Regional) Contest (NEERC 17) 日常训练
A - Archery Tournament 题目大意:按时间顺序出现靶子和射击一个位置,靶子的圆心为(x, y)半径为r,即圆与x轴相切,靶子不会重叠,靶子被击中后消失, 每次射击找出哪个靶子被射中 ...
- 洛谷P2280 [HNOI2003] 激光炸弹 [前缀和]
题目传送门 题目描述 输入输出格式 输入格式: 输入文件名为input.txt 输入文件的第一行为正整数n和正整数R,接下来的n行每行有3个正整数,分别表示 xi,yi ,vi . 输出格式: 输出文 ...
- Poj2482 Stars in Your Window(扫描线)
题面 Poj 题解 下面内容引用自"李煜东 <算法竞赛进阶指南>"(对原文略有缩减,侵删): 因为矩形的大小固定,所以矩形可以由它的任意一个顶点唯一确定.我们可以考虑把 ...
- 高效的 itertools 模块(转)
原文地址:http://python.jobbole.com/87380/ 我们知道,迭代器的特点是:惰性求值(Lazy evaluation),即只有当迭代至某个值时,它才会被计算,这个特点使得迭代 ...
- 原型开发工具 mockplus
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 原型开发工具 mockplus 微信(演示) - Mockup Plus Web Ap ...
- PMP的六大管理学定律
★墨菲定律PMP考试六大管理学定律之1-PMP专业辅导 1.什么是墨菲定律?最简单的表达形式是“有可能出错的事情,就会出错(Anything that can go wrong will go wro ...