javascript - vue2.0项目使用webpack打包上线
本文介绍了javascript - vue2.0项目使用webpack打包上线的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
在开发vue项目时,由于在webpack中会产生跨域的问题,所以就在根目录下config文件的index.js子文件下修改了dev的proxyTable配置从而解决问题,但是到了打包上线的时候这些路径就会出现问题:
例如:
1、在index.js文件中配置:
proxyTable:{
'/api': {
target: 'http://api.*******.cn',
changeOrigin: true,
pathRewrite: {
'^api':'api'
}
}
}
2、在vue某一个需要get/post的文件中使用vue-resoure
this.$http.get('api/**/**/**/hello',...).then((res) => {
...
}).catch((err) => {
...
})
结果是:
1、在开发过程中使用dev命令可以解决跨域,但是打包之后该链接就不行了。
问题:
如果不用手动去该每一次this.$http.get的url,那么有什么办法可以解决咧?
解决方案
把所有的url提取出来放到一个单独的文件里(apis.js)然后统一控制apis.js一个文件就好。
然后在apis.js里用process.env.NODE_ENV === 'production'
来区分是开发环境还是生产环境,分别export开发版本和生产版本的url就好。
补充
我在这补充吧,评论里说不清楚。
新建一个apis.js文件。
let ipath = (process.env.NODE_ENV === 'production') ? '/product' : '/api'
export const API_0 = ipath + '/**/**/**/hello'
export const API_1 = ipath + '/**/**/**/index'
然后,在需要用到接口的地方
someScript.js:
import {API_0} from '/apis.js'
this.$http.get( API_0 ,...).then((res) => {
...
}).catch((err) => {
...
})
这样就可以。
开发版本的代码API_0
的值是/api/**/**/**/hello
正式环境的API_0
的值是/product/**/**/**/hello
如果需要修改的话,只需要修改apis.js
一个文件就可以了。
这篇关于javascript - vue2.0项目使用webpack打包上线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文