webpack 打包vue项目后生成一个可修改接口地址的配置文件。

最新推荐文章于 2024-07-17 11:13:42 发布

不要冲动鸭

最新推荐文章于 2024-07-17 11:13:42 发布

阅读量1.4w

点赞数 7

分类专栏： web前端文章标签：打包配置文件 webpack vue项目接口

本文链接：https://blog.csdn.net/qq_41409679/article/details/84878642

版权

在vue项目打包后，通常遇到需要修改接口地址的问题。本文介绍了两种解决方案：1. 使用generate-asset-webpack-plugin插件生成configServer.json，通过axios动态获取并替换URL；2. 将配置文件config.js放在static目录下，不被webpack编译，直接在index.html引入，方便部署时修改。

摘要由CSDN通过智能技术生成

当我们做完vue项目打包、转测试、部署后，却遇到修改接口地址，或修改域名。但是在npm run build 之后所生成的 dist 文件也是写死的了。我们就需要回来重新修改，重新打包。 no no no 一想都觉得麻烦哎。

所以最好解决方案就是有个 config 文件方便我们管理这些。

解决方法：（共有2个方法）

1、借助插件 generate-asset-webpack-plugin 。在webpack.prod.conf.js中去生成configServer.json文件，让其在build的时候生成json文件，然后再使用axios异步获取json，替换url即可。

第一步：安装插架

npm install generate-asset-webpack-plugin --save-dev

第二步：配置 webpack.prod.config.js 文件

·让其打包的时候输出可配置的文件。


var GenerateAssetPlugin = require(‘generate-asset-webpack-plugin‘); 
var createServerConfig = function(compilation){
  let cfgJson={ApiUrl:"http://www.adoctors.cn"};
  return JSON.stringify(cfgJson);
}

让其打包的时候输入可配置文件