vue項(xiàng)目實(shí)現(xiàn)webpack配置代理,解決跨域問(wèn)題
webpack配置代理,解決跨域
在config文件夾中的index.js文件配置
主要是這句話
proxyTable: { //本地測(cè)試接口
? ? ? '/': {
? ? ? ? ?target: 'http://xx.xx.xx.xx',
? ? ? ? ?changeOrigin: true,
? ? ? ? ?secure: false
? ? ?}
?},?示例代碼:
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: { //本地測(cè)試接口
'/': {
target: 'http://xx.xx.xx.xx',
changeOrigin: true,
secure: false
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
?vue跨域問(wèn)題,修改代理后仍404
首先確認(rèn)安裝了axios,安裝方法:cnpm install axios -S或者不用鏡像npm install axios

dev: {undefined
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://40.73.37.92:8090/',//設(shè)置你調(diào)用的接口域名和端口號(hào) 別忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': ''//這里理解成用‘/api'代替target里面的地址,后面組件中我們掉接口時(shí)直接用api代替 比如我要調(diào)用'http://40.00.100.100:3002/user/add',直接寫‘/api/user/add'即可
}
}
},
接口請(qǐng)求用法

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue的路由配置過(guò)程(Vue2和Vue3的路由配置)
這篇文章回顧了Vue2和Vue3中路由的配置步驟,包括安裝正確的路由版本、創(chuàng)建路由實(shí)例、配置routes以及在入口文件中注冊(cè)路由,Vue2中使用Vue.use(VueRouter),而Vue3中使用createRouter和createWebHashHistory2025-01-01
Vue?動(dòng)態(tài)路由的實(shí)現(xiàn)詳情
這篇文章主要介紹了Vue?動(dòng)態(tài)路由的實(shí)現(xiàn),動(dòng)態(tài)路由是一個(gè)常用的功能,根據(jù)后臺(tái)返回的路由json表,前端動(dòng)態(tài)顯示可跳轉(zhuǎn)的路由項(xiàng),本文主要實(shí)現(xiàn)的是后臺(tái)傳遞路由,前端拿到并生成側(cè)邊欄的一個(gè)形勢(shì),需要的朋友可以參考一下2022-06-06
vue出現(xiàn)Uncaught SyntaxError:Unexpected token問(wèn)題及解決
這篇文章主要介紹了vue出現(xiàn)Uncaught SyntaxError:Unexpected token問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue配置marked鏈接添加target="_blank"的方法
這篇文章主要介紹了Vue配置marked鏈接添加target="_blank"的方法,文中給大家提到了vue實(shí)現(xiàn)類似target="_blank"打開(kāi)新窗口的代碼,感興趣的朋友參考下吧2019-07-07
如何利用Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁(yè)及右鍵菜單
標(biāo)簽頁(yè)一般配合菜單實(shí)現(xiàn),當(dāng)你點(diǎn)擊一級(jí)菜單或者二級(jí)菜單時(shí),可以增加對(duì)應(yīng)的標(biāo)簽頁(yè),當(dāng)你點(diǎn)擊對(duì)應(yīng)的標(biāo)簽頁(yè),可以觸發(fā)對(duì)應(yīng)的一級(jí)菜單或者二級(jí)菜單,下面這篇文章主要給大家介紹了關(guān)于如何利用Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁(yè)及右鍵菜單的相關(guān)資料,需要的朋友可以參考下2022-11-11
el-table表格動(dòng)態(tài)合并行及合并行列實(shí)例詳解
在使用el-table的時(shí)候經(jīng)常會(huì)涉及到表格的列合并,包括表格操作列的合并,下面這篇文章主要給大家介紹了關(guān)于el-table表格動(dòng)態(tài)合并行及合并行列的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
unplugin-auto-import與unplugin-vue-components安裝問(wèn)題解析
這篇文章主要為大家介紹了unplugin-auto-import與unplugin-vue-components問(wèn)題解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
關(guān)于Vue3父子組件emit參數(shù)傳遞問(wèn)題(解決Vue2this.$emit無(wú)效問(wèn)題)
相信很多人在利用事件驅(qū)動(dòng)向父組件扔?xùn)|西的時(shí)候,發(fā)現(xiàn)原來(lái)最常用的this.$emit咋報(bào)錯(cuò)了,竟然用不了了,下面通過(guò)本文給大家分享關(guān)于Vue3父子組件emit參數(shù)傳遞問(wèn)題(解決Vue2this.$emit無(wú)效問(wèn)題),需要的朋友可以參考下2022-07-07

