vue项目打包之后生成一个可修改IP地址文件怎么实现
这篇“vue项目打包之后生成一个可修改IP地址文件怎么实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue项目打包之后生成一个可修改IP地址文件怎么实现”文章吧。
1，在static文件夹下面建立一个config.js文件，
(function () {
window.SITE_CONFIG = {}
// api接口请求地址 这里写你后端要请求的接口地址，如果只是一个地址，可删除下面的那个
window.SITE_CONFIG['baseUrl'] = '请求的地址'
window.SITE_CONFIG['baseUrl_two'] = '请求的地址'
})()2， 在vue项目中的index.html页面引用这个config.js。利用window的属性把地址在全局中暴露出来，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://www.19jp.com">3， 在你封装的请求页面，把这个全局暴露出来的Window属性接口IP写到公共方法里面。
import axios from './http'
import axiosTwo from './axiosTwo'
import store from '../store'
let baseUrl=window.SITE_CONFIG.baseUrl
//该方法为普通接口调用 请求头不一样 该请求头为 application/json
function requestPost([dataList, methodInfo] = [{}, {}]) {
return axios.post(`${baseUrl}`, {
dataList,
methodInfo,
});
}这样就完成了，重新打包之后，在static文件夹中会生成config.js的文件， 修改这个文件的地址，就可以更换IP地址了。
补充：vue项目打包后直接修改ip地址
在 Vue 项目的配置文件中可以设置 devServer.host 属性来指定开发服务器的主机名。打包后的项目文件中并不包含该配置，所以需要使用其他方式来修改 IP 地址。
一种方法是在本地的 hosts 文件中添加一条映射记录，将域名映射到所需的 IP 地址上。例如，将 localhost 映射到 192.168.1.100：
192.168.1.100 localhost
然后在 Vue 项目中使用 localhost 就可以访问到所需的 IP 地址了。
另一种方法是使用一个代理服务器来转发请求。可以使用 nginx 或其他类似的工具来配置代理服务器，将请求转发到所需的 IP 地址上。
还有一种方法是在本地修改 DNS 服务器的配置，将域名映射到所需的 IP 地址上。但这种方法需要较多的技术知识，并且需要对 DNS 服务器有较高的控制权，不是很适合普通用户使用。
相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock（一键安装脚本）
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦（DEDECMS）微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码
