vue webpack实用技巧总结
更新时间：2018年04月24日 08:52:56 投稿：laozhang
本篇文章给大家总结了vue+webpack的实用技巧以及相关实例代码分享，有兴趣的朋友可以参考学习下。
利用 webpack 给生产环境和发布环境配置不同的接口地址
在开发时，前后端分离同时进行开发。前端调用后端给的接口也是在局域网内部的。但是，当项目推到线上的时候,会从真实服务器上获取接口,在测试接口和真实接口之间频繁切换，让人十分恶心。
第一步，在webpack配置文件中，分别设置不同的接口地址
打开dev.en.js文件。修改如下：
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_ROOT: '"//192.168.1.8/api"' // 添加api地址
})
同样在prod.env.js文件中
module.exports = {
NODE_ENV: '"production"',
API_ROOT: '"//www.baidu.com/api"'
}
第二步，在代码中调用设置好的参数
比如我的： src/config/api.js文件
// 原来的API接口地址 var root = 'https://cnodejs.org/api/v1'
// 新配置的API接口地址 var root = process.env.API_ROOT
最后
npm run dev 的时候，跑的就是测试接口。而我们运行
npm run build 打包项目的时候，打包的是服务器正式接口
相关文章
vue-resource + json-server模拟数据的方法
本篇文章主要介绍了vue-resource + json-server模拟数据的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了vue中巧用三元表达式解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
接到这样一个项目需求是这样的，前端vue 必须对象传递后端也必须对象接收，接下来通过本文给大家介绍下net 6+vue 插件axios 后端接收参数的问题,需要的朋友可以参考下2022-01-01
网上有不少使用mockjs模拟数据的文章，但基本都是本地拦截请求返回数据，本文主要介绍了vue-cli实现异步请求返回mock模拟数据，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了Vue3.0插件执行原理与实战，Vue项目能够使用很多插件来丰富自己的功能Vue-Router、Vuex等，节省了我们大量的人力和物力，下面我们就一起来了解Vue3.0插件的原理吧，需要的小伙伴可以参考一下2022-02-02
这篇文章主要介绍了在vue项目如何使用base64加密，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
vue2.x中h函数(createElement)与vue3中的h函数详解
h函数本质就是createElement(),h函数其实是createVNode的语法糖,返回的就是一个Js普通对象,下面这篇文章主要给大家介绍了关于vue2.x中h函数(createElement)与vue3中h函数的相关资料,需要的朋友可以参考下2022-12-12
在Web开发中,页面间的跳转及数据刷新是常见问题,通过使用$router.push和$router.replace方法,可以控制页面跳转的行为,具体操作时,若发现页面ID变更后数据未刷新,可通过给router-view标签添加key值解决,若使用keep-alive2024-10-10
这篇文章主要介绍了vue el-table 动态添加行与删除行的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
vue 使用iView组件中的Table实现定时自动滚动效果
要在css中设置table的高度,使数据过多时出现滚动条,将纵向设置为overflow-y: auto;横向设置隐藏 overflow-x: hidden,接下来通过本文介绍vue使用iView组件中的Table实现定时自动滚动效果,需要的朋友可以参考下2024-05-05
最新评论