VUE项目-饿了吗(ele)-项目总结之项目配置文件修改

项目配置文件修改---获取数据

---

原作者项目源码:https://github.com/ustbhuangyi/vue-sell

文章以下代码来自:https://github.com/ustbhuangyi/vue-sell

作者讲这个项目的时候用得是VUE1.0,后续升级为了2.0,所以有很多东西都做了改变,再上面网址中可以下载到1.0和2.0还有一个master的三个版本的源码,学习我建议还是用VUE2.0,在我下图红色框中的地方可以选择版本（1.0和master）的下载,对比一下目录结构,你会发现很大的不同,我当时学习是以1.0的课程自己查找资料自己强行升级为2.0的,的确花了不少的时间去查找,理解.

当你下载下来两个版本的文件，或者你看讲师的讲解，对比后 你会发现怎么目录下的目录文件都不同了

这里的dev-server.js这两个文件在build文件夹下完全不见了，这下模拟数据怎么办呢，其实不用担心，这个只是webpack和vue-cli升级后所造成的结果，以下是升级前和替换后的源码。当然也可以去上面网址中下载对比后修改

---

升级后（文件webpack.dev.conf.js）：

在最上面定义

 

webpack.dev.conf.js中的所有代码：

'use strict'

const utils = require('./utils')

const webpack = require('webpack')

const config = require('../config')

const merge = require('webpack-merge')

const baseWebpackConfig = require('./webpack.base.conf')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

const portfinder = require('portfinder')

 

const appData = require('../data.json')    //加载本地数据文件

const seller = appData.seller                   

const goods = appData.goods

const ratings = appData.ratings

 

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: {         

before(app) {

app.get('/api/seller', function(req, res) {

res.json({

errno: 0,

data: seller

})

});

app.get('/api/goods', function(req, res) {

res.json({

errno: 0,

data: goods

})

});

app.get('/api/ratings', function(req, res) {

res.json({

errno: 0,

data: ratings

})

});

},

clientLogLevel: 'warning',

historyApiFallback: true,

hot: true,

host: process.env.HOST || config.dev.host,

port: process.env.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,

}

},

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

}),

]

})

 

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://${config.dev.host}:${port}`],

},

onErrors: config.dev.notifyOnErrors

? utils.createNotifierCallback()

: undefined

}))

 

resolve(devWebpackConfig)

}

})

})

 

 

---

升级前（在dev-server.js）：

var path = require('path')

var express = require('express')

var webpack = require('webpack')

var config = require('../config')

var proxyMiddleware = require('http-proxy-middleware')

var webpackConfig = process.env.NODE_ENV === 'testing'

    ? require('./webpack.prod.conf')

    : require('./webpack.dev.conf')

 

// default port where dev server listens for incoming traffic

var port = process.env.PORT || config.dev.port

// Define HTTP proxies to your custom API backend

// https://github.com/chimurai/http-proxy-middleware

var proxyTable = config.dev.proxyTable

 

var app = express()

 

var appData = require('../data.json');

var seller = appData.seller;

var goods = appData.goods;

var ratings = appData.ratings;

 

var apiRoutes = express.Router();

 

apiRoutes.get('/seller', function (req, res) {

    res.json({

        errno: 0,

        data: seller

    });

});

 

apiRoutes.get('/goods', function (req, res) {

    res.json({

        errno: 0,

        data: goods

    });

});

 

apiRoutes.get('/ratings', function (req, res) {

    res.json({

        errno: 0,

        data: ratings

    });

});

 

app.use('/api', apiRoutes);

 

var compiler = webpack(webpackConfig)

 

var devMiddleware = require('webpack-dev-middleware')(compiler, {

    publicPath: webpackConfig.output.publicPath,

    stats: {

        colors: true,

        chunks: false

    }

})

 

var hotMiddleware = require('webpack-hot-middleware')(compiler)

// force page reload when html-webpack-plugin template changes

compiler.plugin('compilation', function (compilation) {

    compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {

        hotMiddleware.publish({action: 'reload'})

        cb()

    })

})

 

// proxy api requests

Object.keys(proxyTable).forEach(function (context) {

    var options = proxyTable[context]

    if (typeof options === 'string') {

        options = {target: options}

    }

    app.use(proxyMiddleware(context, options))

})

 

// handle fallback for HTML5 history API

app.use(require('connect-history-api-fallback')())

 

// serve webpack bundle output

app.use(devMiddleware)

 

// enable hot-reload and state-preserving

// compilation error display

app.use(hotMiddleware)

 

// serve pure static assets

var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)

app.use(staticPath, express.static('./static'))

 

module.exports = app.listen(port, function (err) {

    if (err) {

        console.log(err)

        return

    }

    console.log('Listening at http://localhost:' + port + '\n')

})

 

---