【vue项目问题解决】如何做到webpack打包vue项目后，可以修改配置文件IP和端口

记录在项目开发过程中遇到的小问题，积累开发经验，欢迎大家一起留言探讨

问题

我们在vue项目中打包的时候，webpack会将我们的组件，html，js，css，jpg等其他文件进行打包，其中请求的ip和端口也是在开发过程中写好的，直接打包生成了相应的js，如果此时我们想要修改请求的IP和端口，需要修改打包后的文件，不好查找，并且也容易出错。

期望效果

打包之后，可以通过修改某个配置文件，进行ip和端口的配置

代码实现

1、public文件夹下创建config.js,将apiURL添加到window对象中（线上环境）。内容如下

window.api = {apiURL: 'http://192.168.102.23:8088'
}

2、在public/index.html中引入,保证在线上环境中，会加载config.js，

<script src="./config.js"></script>

3、修改axios配置，修改baseURL，如果是测试环境，则使用我们本地的服务器接口，如果是线上环境，使用config.js中的apiURL。

// create创建axios实例
const request = axios.create({timeout: 10000,baseURL: process.env.NODE_ENV === 'production' ? window.api.apiURL : 'http://172.16.13.57:8088',
})

4、打包

npm run build

5、测试
修改dist/config.js中的apiURL，刷新页面，会发现，已经实现了我们想要的效果，赞！

【vue项目问题解决】如何做到webpack打包vue项目后，可以修改配置文件IP和端口相关推荐

webpack打包vue文件报错，但是cnpm run dev正常，最后我只想说：是我太笨，还是webpack4.4版本太坑...
最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...
WebPack实战 WebPack打包Vue项目
文章目录前言一.使用webpack来进行vue-cli模块化开发二.Webpack配置区分开发环境和生产环境三.vue项目打包 3.1.config-index.js文件 3.2.build- ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
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)以及安装在项目中,这里使用第二种: // ...
使用webpack打包vue工程
记得去年十月份的时候,自己在研究webpack,当时只是知道大致的用法,写了一个简单的demo,现在,经过了7个月对公司产品架构的使用,以及对vue-cli的使用,在了解了实际应用中各种需求之后,我自 ...
[vue] webpack打包vue速度太慢怎么办？
[vue] webpack打包vue速度太慢怎么办? 升级webpack4,支持多进程个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣 ...
[react] 使用webpack打包React项目，怎么减小生成的js大小？
[react] 使用webpack打包React项目,怎么减小生成的js大小? 打包优化的问题解决思路: 代码压缩:UglifyjsWebpackPlugin 代码分组 commonsChunkPlu ...
webpack打包前端项目入门
前言:在开发过程中,利用webpack可以帮我们自动把ES6语法编译成低版本浏览器能解析的JavaScript代码.下面给出webpack打包前端项目入门案例. [终端:进入项目所在目录] 1.初始化 ...

【vue项目问题解决】如何做到webpack打包vue项目后，可以修改配置文件IP和端口

问题

期望效果

代码实现

【vue项目问题解决】如何做到webpack打包vue项目后，可以修改配置文件IP和端口相关推荐

最新文章

热门文章