前言
使用vue+vue-cli+vue-resource+element-ui开发后台管理系统时,遇到一个问题,后台给了一个接口,我这边用vue-resource请求数据,控制台总是报405错误和跨域错误
处理方法:
在vue-cli项目中的config文件夹下的index.js配置文件中,dev长这样子:
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {{
'/api': { / /将www.xxx.com印射为/apis
target: 'https://www.xxx.com', // 接口域名
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '' //需要rewrite的,
}
}
}},
cssSourceMap: false
}
生产和开发模式/api地址处理方法:
**开发模式dev.nev.js中这样配置**
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST: '"/api/"'
})
**生产模式prod.nev.js中这样配置**
'use strict'
module.exports = {
NODE_ENV: '"production"',
API_HOST: ' "http://yxydht.nonghugo.com" '
}
然后就能再任意组件中使用 process.env.API_HOST根据模式匹配地址啦