vue-cli@2.X中的配置
主要解決的是接口問題和路徑問題
1. 后臺配置了允許跨域時的配置步驟（側(cè)重接口問題處理）
1.1 第一步: 在 /config/dev.env.js中添加如下代碼:
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
// 添加下面這行代碼: 表示在開發(fā)環(huán)境下請求的服務器端接口
API_ROOT: ' "http://localhost:3000/api" '
})
1.2 第二步: 在 /config/prod.env.js 中添加如下代碼:
module.exports = {
NODE_ENV: '"production"',
// 添加下面這行代碼: 表示在生產(chǎn)環(huán)境下請求的服務器端接口
API_ROOT: ' "http://localhost:3000/api" '
}
1.3 第三步: 在發(fā)送axios請求之前，設置請求的基礎URL即可
axios.defaults.baseURL = process.env.API_ROOT;
// 注意: process.env 是一個全局變量廓奕，可以判斷當前的環(huán)境晚胡。
2. 后臺未設置允許跨域請求時（側(cè)重路徑問題處理）
2.1 第一步: 在 /config/index.js中添加如下配置
module.exports = {
dev: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// --------------新添加的代理內(nèi)容-----------------------------
// 原本proxyTable屬性中對象為空，在此進行proxy代理配置（可以跨域）
proxyTable: {
'/api': {
target: 'http://localhost:3000', // target表示代理的服務器url
pathRewrite: { // pathRewrite表示路徑重寫卷玉，key表示一個正則，value表示別名
'^/api': '/api' // 即用 '/api'表示'http://localhost:3000/api'
}
}
},
// ---------------------------------------------------------
host: 'localhost',
port: 8080, // 開啟服務器的端口
autoOpenBrowser: false, // 是否開啟在瀏覽器中打開
errorOverlay: true,
notifyOnErrors: true,
poll: false,
devtool: 'cheap-module-eval-source-map',
cacheBusting: true,
cssSourceMap: true
},
build: {
// build時輸出的index.html文件喷市，可以自定義路徑
index: path.resolve(__dirname, '../dist/index.html'),
// build時輸出的靜態(tài)(除了index.html)資源路徑
assetsRoot: path.resolve(__dirname, '../dist'),
// build時輸出靜態(tài)資源的二級目錄
assetsSubDirectory: 'static',
// 代表打包后相种，index.html里面引用資源的的相對地址
assetsPublicPath: './',
// 是否開啟cssSourceMap
productionSourceMap: true,
devtool: '#source-map',
// 是否開啟gzip
productionGzip: false,
// 需要用gzip壓縮的文件擴展名
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
}
2.2 其余的配置步驟和后臺允許跨域時的步驟相同
vue-cli@3.X中的配置
主要解決的同樣是接口問題和路徑問題
1. 后臺配置了允許跨域時的配置步驟（側(cè)重接口問題處理）
axios.defaults.baseURL = process.evn.NODE_ENV === 'development' ? 'devUrl' : 'propUrl'
/*
參數(shù)解釋:
1. devUrl : 開發(fā)環(huán)境中請求的后臺url
2. propUrl : 生產(chǎn)環(huán)境中請求的后臺url
*/
2. 后臺未設置允許跨域請求時（側(cè)重路徑問題處理）
2.1. 第一步: 接口配置同上
2.2. 第二步: 路徑和axios配置如下:
2.2.1 在與package.json文件的同級目錄下創(chuàng)建 vue.config.js, 內(nèi)容如下:
詳細參考見網(wǎng)址:
module.exports = {
devServer: {
publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
proxy: {
'/api': {
target: '<url>',
pathRewrite: {
'^/api' : '/api'
}
},
'/foo': {
target: '<other_url>'
pathRewrite: {
'^/foo': '/foo'
}
}
}
}
}
/*
示例: 遠程服務器未處理跨域，接口為: http://localhost:3000/api/
本地開發(fā)環(huán)境中的url為: http://localhost:8080
1. proxy: {
2. '/api5': {
3. target: 'http://localhost:3000',
4. pathRewrite: {
5. '^/api5' : '/api'
6. }
7. }
8. }
其中
第2行中的 '/api5'是自定義的本地請求時的名字
第3行的target表示代理的服務器url
第4行的pathRewrite表示路徑重寫
第5行的'^/api5'是一個正則表達式品姓，表示要匹配請求的url中寝并，全部'http://localhost:8080/api5' 轉(zhuǎn)接為 http://localhost:3000/api/
*/
