vue中通過腳手架來模擬數據的通訊

vue-cli(版本更新)，由原來的2.8.1升級爲2.9.1。主要改變是原來在build文件夾下的dev-server.js刪掉了，增加了webpack.dev.conf.js。導致原來通過express方式引入的數據找不到

1.我們知道在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引入時候的路徑