本人也是菜鸟中的菜鸟，本文只是提供一种思路（可能是错误的，但目前看来可行）
依赖后端的数据进行测试是不行滴，前端的东西自己解决～～
首先了解下几个概念。
一.webpack-dev-server
webpack-dev-server为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。这个东西在我们的webpack-config.js中进行配置，
以上配置告知webpack-dev-server，在localhost:8080下建立服务，将dist目录下的文件，作为可访问文件。
当然还有更多配置选项，有兴趣自己去找相关资料吧。
二.express
其实我对他的了解也不深。反正它在我们项目中的角色是：配置Http请求。
下面是一些基础知识
注：本文目的是 本着够用能用原则仅让你理解express的用途用法，能看懂一些基本配置。
文章必有疏漏，详情请看express官网。
Express 是一个自身功能极简，完全是由路由和中间件构成一个的 web 开发框架：从本质上来说，一个 Express 应用就是在调用各种中间件
那么什么是中间件呢？
中间件（Middleware）是一个函数，它可以访问请求对象（[request
object]( (`req`)）, 响应对象（[response object] (`res`)）, 和 web
应用中处于请求-响应循环流程中的中间件，一般被命名为 `next` 的变量
所以任何函数都可以是中间件，或者说 中间件的功能是访问请求对象、相应对象...能提供这些功能的就符合中间件的概念。
那么具体的形式是怎么样的呢？
中间件绑定到 app 对象使用 `app.use()` 和 `app.METHOD()`， 其中， `METHOD` 是需要处理的 HTTP 请求的方法，例如 GET, PUT, POST 等等，全部小写。例如：
var app = express();
// 没有挂载路径的中间件，应用的每个请求都会执行该中间件
app.use(function (req, res, next) {
console.log('Time:', Date.now());
next();
});
// 挂载至 /user/:id 的中间件，任何指向 /user/:id 的请求都会执行它
app.use('/user/:id', function (req, res, next) {
console.log('Request Type:', req.method);
next();
});
// 路由和句柄函数(中间件系统)，处理指向 /user/:id 的 GET 请求
app.get('/user/:id', function (req, res, next) {
res.send('USER');
});
这个app对象，如果是express()的实例，那么这个挂载的中间件称为应用级中间件，如果是
var router=express.Router();
那么这个就称为路由级中间件了。
不过这几级，我查了一下，似乎除了路由级优先应用级执行，其他好像也没什么区别～
好了，基本概念先讲这么多。
具体在我们的vue项目中这样应用：
在web.pack.conf.js中，加入这段
var express = require('express');
var app = express();
var appData = require('./goods.json') /* 引入goods.json数据文件 */
var goods = appData.goods /* goods.json文件文件下的.goods数据赋值给变量goods */
var apiRoutes = express.Router() /* 定义express.Router() 对象 */
apiRoutes.get('/goods', function(req, res){ /* 定义接口并返回数据 */ res.json({ data: goods }) }) app.use('/api', apiRoutes) /* 定义接口在/api目录下，方便管理 */
然后继续配置我们的webpack.dev
devServer: {
before(app) {
app.get('/api/goods', (req, res) => {
res.json({
code: 0,
data: goods })
}) }
}
利用定义好的路径(我们这里是localhost:8080/api/goods),就可以访问到我们的api了
开头就说了，这只是一种思路，也可以启动一个server来提供数据测试服务，不过这就涉及其他问题了。
这里我有点疑惑的是，为什么vue-cli运行起来的项目主页在localhost:8080/#/这里，为什么多个/#/我哪里配置错了吗？求解╮(╯_╰)╭
网友评论