我在vue移动app开发中遇到了这样一个问题——在打包后打开app,点击登录无法连接到服务器,甚至连请求都没能发出去。
确认了下,首先手机和电脑连接的是同一wifi且能ping通。排除了网络问题的可能性。
后来发现了这样一个坑爹的问题
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/SSMTWO': {
target: '', //域名
secure: false,
changeOrigin: true,
pathRewrite: {
'': ''
}
}
},
这里地址我去掉了。这里是配置跨域,然而在生产环境中移动app是根本不能够进行跨域的!(使用Nginx进行配置跳转除外)。
那么,如何进行生产环境配置呢?
我们可以注意到,在index.js上下个又一个js配置文件,分别是dev.env.js和prod.env.js,这里我们在prod.env.js,也就是生产环境的module中添加代码后如下:
'use strict'
module.exports = {
NODE_ENV: '"production"',
BASE_URL: '"这里填你的服务器地址"',
}
配置完成后,需要在调用的地址设置其baseurl,我使用的是axios,在main.js里进行全局注册时,对其进行设置,添加后代码如下:
Vue.use(ElementUI);
axios.defaults.baseURL = process.env.BASE_URL
Vue.prototype.$axios = axios;
此时在运行npm run build
打包后再打包成apk,测试没有问题了。