使用代理解决跨域问题,快速启动创建本地服务,跑打包好的项目
2021-10-13  本文已影响0人 
默默无闻的小人物
前言:对于在node环境中,快速启动http服务最常用的一个插件就是 http-server,能让我们快速起一个本地服务。我们本章不讲http-server,对于http-server,有兴趣的点这里传送门
开发过程中: webpack项目我们在开发阶段可以配置代理,从而在run项目的时候接口是可以正常访问的,因为webpack也是在本地起了一个服务,然后通过代理去解决跨域等问题。
使用场景:但是我们在打包整个项目之后也想跑一下,想在本地测试一下,这时候我们可以使用node.js在本地起一个服务。这时候就比较困扰了。因为也需要代理。为了快捷我们借助别人写的工具吧。毕竟我们都是站在巨人肩膀上开发。
而且这个工具还能特别针对老型项目设计,没有使用构建工具
确保你的 nodejs 版本 >= 8.0.0,
解决跨域问题,支持本地开发热更新
安装
yarn add @gauseen/web-proxy -D    # 推荐
# or
npm i @gauseen/web-proxy -D
使用
在打包后的dist项目同级目录下,新建server.js
// 例子:
// server.js
 
const path = require('path')
const server = require('@gauseen/web-proxy')
 
const options = {
    watch: false,
    watchStatic: path.join(__dirname, './dist/'),
    serverStatic: path.join(__dirname, './dist/'),
    port: 8099,
    proxyTable: {
        '/api': { target: 'http://doman.com/', }
        /* '/apiFlag': {
            target: 'http://doman.com/',
            pathRewrite: {
                // ^/old-path' : '/new-path
                // 下面配置是将,/apiFlag 开头的请求,重写为 /newFlag,也可为 '' (空)
                '^/apiFlag': '/newFlag',
            }
        } */
    },
    notify: true,
    // ignores: ['js'],
    callback: function () {
        console.log('Server run success ...')
    },
}
 
server(options)
启动服务
node server.js
浏览器输入
http://localhost:8099
参数说明
| 参数 | 说明 | 类型 | 默认 | 是否必选 | 可选项 | 
|---|---|---|---|---|---|
| watch | 是否开启热更新 | Boolean | false | 是 | - | 
| watchStatic | 热更新目录 | String | 是 | - | |
| serverStatic | 静态服务目录 | String | 是 | - | |
| proxyTable | 要代理的 doman | Object | 是 | - | |
| port | 端口 | Number | 8008 | 否 | - | 
| notify | 是否在浏览器端显示通知 | Boolean | false | 否 | - | 
| ignores | 忽略文件内容 | Array | - | 否 | [css, html, css] | 
| callback | 服务启动成功回调 | Function | - | 否 | - | 


