从零开始使用 Webpack 搭建 Vue 开发环境(2)

当前位置:

首页 > temp > JavaScript教程 >

从零开始使用 Webpack 搭建 Vue 开发环境(2)

+ import 'es6-promise/auto'
+ import axios from 'axios'

  // ...

在项目中发送一个请求

index.js

  import 'es6-promise/auto'
  import axios from 'axios'

+ axios.post('/login')

  // ...

运行后这个请求明显会返回一个 404，那么如何让它返回有效的数据呢，在 webpack.config.js 里配置 devServer 参数

webpack.config.js

  module.exports = {
    // ...
    devServer: {
+     before(app, server) {
+       app.post('/login', (req, res) => {
+         res.json({success: true})
+       })
+     },
      compress: true,
      port: 8080
    }
  }

重新启动后，就可以看到请求 /login 地址返回了数据 {"success": true}，这样就可以在本地调试接口了

当然，所有接口都这样写未免麻烦，可以用 proxy 参数将请求接口代理到其它地址去

webpack.config.js

  module.exports = {
    // ...
    devServer: {
      before(app, server) {
        app.post('/login', (req, res) => {
          res.json({success: true})
        })
      },
+     proxy: {
+       '/api': {
+         target: 'http://localhost:3000'
+       }
+     },
      compress: true,
      port: 8080
    }
  }

这时，例如请求 /api/posts 实际上会被代理到 http://localhost:3000/api/posts

打包

配置 mode 参数

webpack.config.js

module.exports = {
  mode: 'production'
  // ...
}

production 和 development 两种 mode 参数很明显，production 用于发布，development 用于开发，具体有什么区别，看这里 Click here

执行 npm run build 即可打包，打包后生成的文件都在 dist 目录中

栏目列表