本地开发时使用webpack-dev-server 快速搭建静态服务器并代理请求(附源码)

有的时候会有这样的需求,需要开发几个静态页面(可能是后面要整合到jsp,可能是考虑seo,也可能是统一之前项目的代码风格等等因素),最终是用jquery或者js开发的,而不是vue、react。这种情况下又因为前后端是分离的,直接调接口将会出现跨域问题。

解决办法1:使用webpack-dev-server 快速搭建静态服务器,并配置proxy代理

package.json代码如下:

{
  "name": "devserve",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --progress --config ./webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.68.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}

webpack.config.js代码如下

const path = require('path');
// 开发环境调试地址
const targetUrl = {
    testUrl: 'https://localhost:11000/' // 改为自己的后端地址
}

module.exports = {
    entry: './app.js', // 必须有入口文件
    mode: 'development',
    resolve: {
        extensions: ['.js', '.json', '.wasm'],
    },
    devServer: {
        https: true, // 是否开启https
        static: {
            directory: path.join(__dirname, '../www'), // 静态本地服务
        },
        compress: true, // 启用 gzip compression: 如果为 true ,开启虚拟服务器时,为你的代码进行压缩。加快开发流程和优化的作用
        host: 'localhost',
        port: 9000,
        hot:true,
        open: false,
        proxy: {
            '/api': {
                target: targetUrl.testUrl,
                changeOrigin: true,
                pathRewrite: { '^/api': '' },
            },
        },
    },
};

因为我这边接口是调的https的,因此开启了https配置,如果要使用http的,将https改为false即可
app.js这个里面没有内容,只是让webpack编译不报错而已,因为webpack需要一个入口文件

// 入口文件

代码目录结构如下图:


image.png

最后在devServe目录下执行:

// 1.安装依赖
npm i
// 2.开启服务 
npm run dev

最后浏览器访问即可:https://localhost:9000/

解决办法2:使用nginx代理请求到后端

这个方法大概说下思路
1.开启静态服务。可以用npm的serve模块也可以用express或者iis等等,或者直接使用webstorm直接打开index.html,当然使用nginx也可以开启静态服务器
2.然后就是代理接口了,这个使用nginx代理刚刚的地址即可

....
       location /api/ {
           proxy_pass https://localhost:11000/;
       }
....

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):