vue项目打包之后生成一个可修改IP地址的文件(具体操作)
作者：信仰风声
今天在做项目的时候遇到了一个问题， 就是把项目部署到不同的服务器上， 但不能每次修改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="./src/assets/style/index.css" rel="external nofollow" >
<title>修改IP</title>
<script src="./static/config.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html> 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 服务器有较高的控制权，不是很适合普通用户使用。
到此这篇关于vue项目打包之后生成一个可修改IP地址的文件(具体操作)的文章就介绍到这了,更多相关vue打包生成可修改IP地址的文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！