- 根目錄中創(chuàng)建 .env.development
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = 'http://192.168.1.202:8088'
VUE_APP_BASE_PRINT= 'http://192.168.1.202:9000'
VUE_CLI_BABEL_TRANSPILE_MODULES = true
- 根目錄下創(chuàng)建 vue.config.js
'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = defaultSettings.title || 'vue Element Admin' // page title
const port = process.env.port || process.env.npm_config_port || 9527 // dev port
module.exports = {
publicPath: '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
port: port, // 本地端口號
open: true, // 配置自動啟動瀏覽器
overlay: { // 同時顯示警告和錯誤
warnings: false,
errors: true
},
proxy: {
'/filesUpload': {
target: process.env.VUE_APP_BASE_PRINT, // 你請求的第三方接口
changeOrigin: true, // 在本地會創(chuàng)建一個虛擬服務端，然后發(fā)送請求的數(shù)據(jù)咳燕，并同時接收請求的數(shù)據(jù)跪但，這樣服務端和服務端進行數(shù)據(jù)的交互就不會有跨域問題
pathRewrite: { // 路徑重寫埋心，
'^/filesUpload': '' // 替換target中的請求地址菱蔬，也就是說以后你在請求http://api.douban.com/v2/XXXXX這個地址的時候直接寫成/filesUpload即可稿黄。
}
}
}
}
}
- 請求前安裝 axios 配置 main.js
import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/filesUpload'
4.進行請求
import axios from 'axios';
axios.get('/filesUpload/' + this.url, {
}).then((response) => {
this.tabhtml = response.data
})
注：個人理解：vue.config.js中配置是/filesUpload路徑代理env.VUE_APP_BASE_PRINT（http://192.168.1.202:9000）而 main.js 中 axios.defaults.baseURL = '/filesUpload' 即 訪問本地域名端口（http://localhost:9527/）實際跳轉至 /filesUpload 代理的http://192.168.1.202:9000
如有錯誤缝裁，歡迎各位大佬指出
