vue2中dev-server.js删掉导致通过express方式引入的数据找不到解决方案

一、前言

vue-cli(版本更新)，由原来的2.8.1升级为2.9.1。主要改变是原来在build文件夹下的dev-server.js删掉了，增加了webpack.dev.conf.js。导致原来通过express方式引入的数据找不到。本文将针对此问题，提供两种结局方案。

二、方案A— 使用node中的express

我们知道在2.9.1的版本中没有express。

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

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

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

'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')
/* datura_lj 增加express 20171126 */
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: true,
    hot: true,
    compress: 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,
    },
    /* datura_lj 增加express 20171126 */
    before(app) {
      app.get('/api/goods', (req, res) => {
        res.json({
          code: 0,
          data: goods
        })
      })
    } 
    /* datura_lj 增加路由规则 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
    }),
  ]
})

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

• 检测 npm run dev后，在浏览器地址栏中输入http://127.0.0.1:8080/api/goods即可看到数据
• 注意 新建goods.json引入时候的路径

二、方案B— 使用json-server，启动一个server

• 新建server文件夹并配置相关信息

|--server
  |--package.json
  |--static
    |--config.js
    |--db.json
    |--server.js

1. package.json

{
  "name": "json-server-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server": "cd static && nodemon server.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "json-server": "^0.9.6",
    "nodemon": "^1.11.0"
  }
}

2. config.js

module.exports = {
  SERVER:"127.0.0.1",  
  PORT: 9527,
  DB_FILE:"db.json"
};

3. db.json

数据文件

4. server.js

const path = require('path');
const config = require('./config');
const jsonServer = require('json-server');
const ip = config.SERVER;
const port = config.PORT;
const db_file = config.DB_FILE;
const server = jsonServer.create();
const router = jsonServer.router(path.join(__dirname, config.DB_FILE));
const middlewares = jsonServer.defaults();
server.use(jsonServer.bodyParser);
server.use(middlewares);
server.use((req, res, next) => {
  res.header('X-Hello', 'datura_lj');
  next();
})
router.render = (req, res) => {
  res.jsonp({
    code: 0,
    body: res.locals.data
  })
}
server.use("/api", router);
server.use(router);
server.listen({
  host: ip,
  port: port
}, function () {
  console.log(JSON.stringify(jsonServer));
  console.log(`JSON Server is running in http://${ip}:${port}`);
});

• 检测 在server文件下执行npm run server后，在浏览器地址栏中输入http://127.0.0.1:9527/goods即可看到数据

三、在vue组件中，调取数据

 created () {
    /*
    * 方式一
    * 使用node中的express
    */
    /*this.$http.get('/api/goods').then((data) => {
      if(data.body.code == 0){
        this.imgArr = data.body.data;
        console.log(this.imgArr)
      }
    })*/
    /*
    * 方式二
    * 使用json-server方式
    */
    this.$http.get('http://127.0.0.1:9527/goods').then((data) => {
      console.log(data.body)
      if(data.body.code == 0){
        this.imgArr = data.body.body;
        console.log(this.imgArr)
      }
    })
  }

四、效果展示

链接：https://www.jianshu.com/p/9c52ba3113da