首页 > web前端 > js教程 > 如何使用vue webpack

如何使用vue webpack

php中世界最好的语言
发布: 2018-06-02 11:17:45
原创
1332 人浏览过

这次给大家带来如何使用vue webpack,使用vue 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
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Vue怎样实现beforeEnter钩子函数

js图片转base64方法总结

以上是如何使用vue webpack的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板