新版的vue-cli腳手架中少了dev-server.js檔案,怎麼模擬後臺資料呢?
阿新 • • 發佈:2018-12-17
第一步:,在webpack.dev.conf.js中加入
在webpack.dev.conf.js中引入node中的express框架即後臺模擬資料json檔案,程式碼如下:
//這裡是模擬後臺資料
const express = require('express')
const app = express()
var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
---------------------
作者:jackie_bobo
來源:CSDN
原文:https://blog.csdn.net/jackie_bobo/article/details/80654036
版權宣告:本文為博主原創文章,轉載請附上博文連結!
第二步:
找到devServe物件
加入下面的,如果報錯記得加 , 號
//找到devServer,新增 before(app) { app.get('/api/seller', (req, res) => { res.json({ // 這裡是你的json內容 errno: 0, data: seller }) }), app.get('/api/goods', (req, res) => { res.json({ // 這裡是你的json內容 errno: 0, data: goods }) }), app.get('/api/ratings', (req, res) => { res.json({ // 這裡是你的json內容 errno: 0, data: ratings }) }) }
3:完整程式碼
'use strict' // // 通過express匯入路由 const express = require('express') const app = express() var appData = require('../data.json') // json賣家資料 var seller = appData.seller // json商品資料 var goods = appData.goods // json評論資料 var ratings = appData.ratings // 編寫路由 var apiRoutes = express.Router() // 所有通過介面相關的api都會通過api這個路由導向到具體的路由 app.use('/api', apiRoutes) // 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) 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: { // 找到devServer物件並在其後新增相關路由設定 before (app) { app.get('/api/seller', function (req, res) { // 服務端收到請求後返回給客戶端一個json資料 res.json({ // 當我們資料正常時,我們通過傳遞errno字元為0表示資料正常 errno: 0, // 返回json中的賣家資料 data: seller }) }) app.get('/api/goods', function (req, res) { res.json({ errno: 0, data: goods }) }) app.get('/api/ratings', function (rea, res) { res.json({ errno: 0, data: ratings }) }) }, 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, } // // }, 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) } }) })
前臺resource呼叫
export default { data(){ return { seller: {} } }, created() { this.$http.get('/api/goods').then((result)=>{ console.log("222") console.log(result.body) }) },