VueCli3项目中模拟数据及配置代理转发

Vue项目在本地模拟数据

在vue-cli里面通过devservers进行模拟数据。
一般会在vue.config.js里面设置，在vue-cli3里面默认隐藏了这个文件。我们需要在根目录下新建vue.config.js文件，其实这里写的是express代码

// vue.config.js
module.exports = {
    devServer: {
        before(app) {
            // app是一个express实例
            app.get('/api/courses', (req, res) => {
                setTiemout(() => {
                    res.json([{ name: 'web' }])
                }, 1000)
            })
        }
    }
}

// 模拟的接口可以通过路径进行本地访问查看
locallhost:8080/api/courses

使用axios进行调用

import axios from 'axios'
export function getCourses() {
    return axios.get('/api/courses').then(res => res.data)
}

代理转发

设置开发服务器代理选项可以有效避免调用接口时出现的跨域问题

// vue.config.js
module.exports = {
    devServer: {
        // 设置主机地址
        host: 'localhost',
        // 设置默认端口
        port: 8080,
        // 设置代理
        proxy: {
        	// 监听一个别名，下面替换掉
            '/api': {
                // 目标 API 地址
                target: 'http://192.168.1.1:8080', // 后台接口地址
                ws: true, // 代理 websockets
                secure: false, // 如果是https接口
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    '^/api': '/screen' // 替换
                }
            }
        }
    }
}

本地开一个服务用来测试代理转发

在项目的根目录下新建server文件夹，新建api.js文件

// 安装依赖包 npm i express 
const express = require('express')
const app = express()

app.get('/api/courses', (req, res) => {
	setTiemout(() => {
		res.json([{ name: 'web' }])
	}, 1000)
})

// 监听端口
app.listen(3000)

// 在命令行中启动
node .\server\api.js