webpack打包vue项目后，配置可以修改的配置文件

时间：2024-03-12 18:24:31

方案一：https://blog.csdn.net/qq_41772754/article/details/88106508?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

 

Vue 打包后，如果想修改整体的后台接口域名，或者图片文件的路径，就需要在源代码中修改后，再次进行build打包。这样很不灵活，先看一下vue打包后的文件结构，项目打包后会生成一个dist文件

── dist 
├── static // 外部静态资源文件夹，对应项目中的static文件夹 ，与index.html同级 
└── index.html // 项目入口主文件


从上面的打包文件解构中我们知道，vue中有一个存放外部资源的文件夹static，它里面的文件是不会被打包编译的，所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js文件的方式引入，然后就可以全局使用。

具体的方法如下：
1.在项目中找到static文件夹，在里面创建一个配置文件，起名为config.js

     如果不清楚项目结构的可以看一下前面我写的Vue项目目录结构说明与配置

┌── build 
├── config 
├── node_modules 
├── src 
├── static 
│ ├── config.js // 配置文件
│ 
├── index.html:


2.然后在创建的config.js配置文件中，声明一个对象Glob，将它赋值给window，对象名字随便取，只要不占用关键字即可，对象中存放你所需要配置的各种路径和数据，如下：

这里说明下，赋值给window，在vue里面获取不到window对象。所以不要赋值给window，直接定义个常量就好。

/*window.Glod = {
BaseUrl:"http://xxx.api.com", // 你的接口路径(正式)
//BaseUrl:"http://xxx.apiTest.com", // 你的接口路径(测试)
appkey:"",
token:""
.......
}
*/
const Glod = {
BaseUrl:"http://xxx.api.com", // 你的接口路径(正式)
//BaseUrl:"http://xxx.apiTest.com", // 你的接口路径(测试)
appkey:"",
token:""
.......

}


3.将此配置文件在index.html 文件中引入

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="./static/config.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>


注：引入的文件路径一定要正确哦
4.使用。到这里相信会一点js基础知识的同学都知道怎么在项目中使用我们配置的数据，没错就是 Glob,比如我们要配置axios请求路径如下：不清楚怎么配置的同学可以看一下前面我写的vue axios请求 配置

axios 配置文件

import axios from \'axios\' 
....
let baseURL
// 判断开发环境（一般用于本地代理）
if (process.env.NODE_ENV === \'development\') { // 开发环境
baseURL = \'/api\'
} else { // 编译环境
if (process.env.type === \'test\') { // 测试环境
baseURL = Glob.BaseUrl // 在这里使用配置文件中的域名
} else { // 正式环境 
baseURL = Glob.BaseUrl // 在这里使用配置文件中的域名 
}
}
const Axios = axios.create({
baseURL:baseURL , 
timeout: 60000, 
responseType: "json",
withCredentials: false
});
.....


到此，项目的配置文件就已经设置好了，这样测试环境 和 正式环境的切换，或以后公司的后台服务器要迁移 和 域名更换等，就可以直接在配置文件中修改，而不用重新打包部署。

需要注意一点，每次更改了配置文件，就需要重新进入一下项目，也就是重新刷新一下首页，让配置文件重新引入一次，覆盖掉原有的 Glob 对象，这样修改才会生效。

方案二：https://blog.csdn.net/qq_42240091/article/details/96431677

vue项目打包后生成一个配置文件可以修改打包后的服务器api地址
问题描述：vue项目打包上线之后，如果要改服务器api地址，只能在源码更改然后重新打包发布，为了解决这个问题，我们可以在static增加一个config.json文件，然后打包的时候它不会被打包，从而在里面修改服务器地址，这样就不用在源码更改。
我觉得这是最简单的办法，不用修改build里面webpack.prod.conf配置文件
1.在static创建config.json文件

 

 

以上是需要更改的三个文件

//服务器ip地址

{"ApiUrl":"http://192.168.0.158"}


2.在main.js加入以下代码

//要引入axios才能用
//注意获取config.json的地址
axios.get("./../static/config.json").then((result)=>{
console.log(result)
//存到localStorage里面，方便在其他页面获取
localStorage.setItem(\'ApiUrl\',result.data.ApiUrl);
console.log(localStorage.getItem(\'ApiUrl\'));
//也可以声明成全局变量,在其他页面用this.ApiUrl获取
// Vue.prototype.ApiUrl=result.data.ApiUrl
}).catch((error)=>{console.log(error)});

3.在你存放接口的文档api.js获取

console.log(localStorage.getItem(\'ApiUrl\'))
const APIV1 = localStorage.getItem(\'ApiUrl\')+\'/api/v1\'

或者是在你封装get/post方法的地方直接获取地址

//getapi为自己封装的获取api.js里面的接口地址
url: localStorage.getItem(\'ApiUrl\')+getapi(url),


4.运行npm run build，打包好的dist里面的static里面会新增一个config.json文件（这就是我们想要的修改服务器api地址的入口）

5.测试：安装http-server或者anywhere 搭建web服务器环境(建议使用anywhere)

npm install anywhere -g

在dist打开命令行 输入anywhere，浏览器会自己打开，那么你打包好的项目就相当于在服务器上运行了，这时你再修改config.json里面的地址，刷新网页，你会发现地址已经更改为你刚改的地址了。

方案三：https://blog.csdn.net/qq_31173561/article/details/90672070

 

相关文章