Vue項目在開發環境跨域和生成環境部署跨域問題解決

一.在dev環境下的跨域問題解決
1.項目使用的是axios請求網絡,將baseUrl修改為/api (這里是使用webpack提供的代理功能將/api代理成目標接口host)

axios.defaults.baseURL = '/api';
2.進入config/index.js里,在dev下增加proxyTable配置,可以匹配到/api,將其代理成目標接口host

dev: {

// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
//////////////////////////////////////////////////////////////
proxyTable: {
'/api': {
target: 'http://192.168.1.111:8080/',//目標接口域名
changeOrigin: true,//是否跨域
pathRewrite: {
'^/api': ''//重寫接口,后面可以使用重寫的新路徑，一般不做更改
}
}
}

}
  此時已經解決了dev下的跨域問題

3.進入package.json,在dev字段下增加 " --host 0.0.0.0 ",這樣就可以真機通過ip地址訪問項目,進行調試

"scripts": {
"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
}

 

二、生產環境

（1）在config/dev.env.js下配置開發環境的API_ROOT

 

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_ROOT: '"/api"' //這是新增的代碼
})

 

（2）再config/prod.env.js下配置生產環境的API_ROOT

'use strict'
module.exports = {
NODE_ENV: '"production"',
API_ROOT: '"https://xxx/"' //這是新增的代碼
}

（3）在需要調用的地方

 

export const evidence_url = process.env.API_ROOT + '/' + ''; 

//process.env.API_ROOT 根據不同的環境會返回給你不同的API_ROOT

 

（4）重啟項目