16.如何做到webpack打包vue项目后，可以修改配置文件

问题描述：

前端需要修改restful API的url，但是打包之后，配置文件找不到了，如果在npm run build 生成dist后，这个配置也被写死了，传到运行的前端服务器上后，假设某次，api服务器的ip修改了，改动只是更新下这个url，但是却需要会到前端源码，url后，在重新npm run build,然后再把整个dist再重新传到前端服务器，才可以。

解决方法：

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

具体做法：

先安装generate-asset-webpack-plugin插件

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

在webpack.prod.conf.js里面配置

//让打包的时候输出可配置的文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin');
var createServerConfig = function(compilation){let cfgJson={ApiUrl:"http://139.129.31.108:8001"};return JSON.stringify(cfgJson);
}

//让打包的时候输入可配置的文件new GenerateAssetPlugin({filename: 'serverconfig.json',fn: (compilation, cb) => {cb(null, createServerConfig(compilation));},extraFiles: []})

打包之后，在根目录就会生成serverconfig.json文件

使用：

axios.get("serverconfig.json").then((result)=>{localStorage.setItem('ApiUrl',result.data.ApiUrl);console.log(localStorage.getItem('ApiUrl'));}).catch((error)=>{console.log(error)});

则可以获取到serverconfig.json里面的key ApiUrl的值，需要注意的是，由于是异步操作，为了通信，可以采用localstorage，把东西存起来，即localstorage.setItem

使用的时候可以用localstorage.getItem

转载于:https://www.cnblogs.com/caimuqing/p/7094364.html

16.如何做到webpack打包vue项目后，可以修改配置文件相关推荐

【vue项目问题解决】如何做到webpack打包vue项目后，可以修改配置文件IP和端口
记录在项目开发过程中遇到的小问题,积累开发经验,欢迎大家一起留言探讨问题我们在vue项目中打包的时候,webpack会将我们的组件,html,js,css,jpg等其他文件进行打包,其中请求的ip ...
vue修改入口文件名字_webpack打包vue项目，可修改配置文件
问题: vue项目打包完成后,如需改变配置文件中的信息,比如域名修改(如下图config.js),是不可能在配置文件中直接更改的,因为配置文件是前端写死的,这时只能手动更改项目中的配置,然后重新打包n ...
解决webpack打包vue项目后，部署完成后，刷新页面页面404
1.url不动式 url完全不动,即你的页面怎么改变,怎么跳转url都不会改变.这种情况的原理就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页 2.带hash(#)式这种相对于第一种的 ...
webpack打包vue项目之后dist文件夹在本地跑起来
webpack打包vue项目之后dist文件夹在本地跑起来转载为:https://blog.csdn.net/u014054437/article/details/79981307 谢谢博主亲测, ...
使用webpack打包vue项目
使用webpack打包vue项目安装webpack工具,安装方式有两种:全局安装(命令:npm install -g webpack webpack-cli)以及安装在项目中,这里使用第二种: // ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
WebPack实战 WebPack打包Vue项目
文章目录前言一.使用webpack来进行vue-cli模块化开发二.Webpack配置区分开发环境和生产环境三.vue项目打包 3.1.config-index.js文件 3.2.build- ...
webpack打包VUE项目读取外部配置文件，灵活配置域名
参考方案一作为一个兼职前端和运维的java程序员,今天我司测试人员提出了一个需求,当后台服务地址ip地址改变后,webpack打包的VUE项目得更改地址重新打包,太麻烦了,最好可以读取外部配置文件的 ...
webpack打包vue项目之后生成的dist文件该怎样启动运行跑起来
webpack打包生成了dist文件 ,直接运行dist文件中的index.html会报这个错. 我们需要部署在express-generator服务器上来运行. 安装express-generato ...

16.如何做到webpack打包vue项目后，可以修改配置文件

16.如何做到webpack打包vue项目后，可以修改配置文件相关推荐

最新文章

热门文章