局域网访问vue项目-白红宇

局域网访问vue项目

阅读量：267 次

发布时间：2019-03-01

本文共 1224 字，大约阅读时间需要 4 分钟。

在 package.json 中配置 webpack-dev-server

在某些项目中，当我们需要在本地开发时，可能会遇到跨域问题。此时，我们可以通过配置 webpack-dev-server 来解决这个问题。

修改 package.json 文件

打开你的项目根目录下的 package.json 文件，找到 scripts 部分。将 dev 脚本中的 webpack-dev-server 参数添加 --host 0.0.0.0，这样可以允许服务器在所有网络接口上监听。

{  "scripts": {    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",    "start": "npm run dev",    "build": "node build/build.js"  }}

配置跨域

如果你在开发过程中遇到跨域问题，可以通过 webpack-dev-server 的 proxy 功能来配置。这样可以避免浏览器的同源策略限制。

// 示例配置{  "paths": {    "static": "static",    "assets": "assets"  },  "publicPath": "/",  "proxyTable": {    "/api": {      "target": "http://192.168.4.123",      "secure": false,      "changeOrigin": true,      "pathRewrite": {        "^/api": ""      }    }  }}

target：目标地址，这里是接口的域名。

secure：如果接口是 HTTPS，建议设置为 true。

changeOrigin：如果接口跨域，建议设置为 true。

pathRewrite：如果需要修改路径，可以在前面加上通配符。

重新构建项目

在修改完 package.json 后，运行以下命令重新构建项目：

npm rebuild

这样可以确保你的 webpack-dev-server 配置生效。如果你在构建过程中遇到问题，可能需要检查 build/webpack.dev.conf.js 文件是否正确配置。

测试配置

在修改完成后，运行 npm start 启动项目，检查是否能够正常访问跨域接口。如果仍然出现错误，请仔细检查 proxyTable 配置是否正确，尤其是 pathRewrite 的设置是否正确。

通过以上方法，你应该能够顺利解决跨域问题并正常使用 webpack-dev-server。如果有任何问题，建议参考 webpack-dev-server 的官方文档或相关技术博客获取更多帮助。

转载地址：http://nvnt.baihongyu.com/

你可能感兴趣的文章