使用代理解决跨域问题,快速启动创建本地服务,跑打包好的项目

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 - -
上一篇下一篇

猜你喜欢

热点阅读