Vue中跨域及打包部署到nginx跨域設(shè)置方法
眾所周知,我們在做前后端分離項目的時候,經(jīng)常需要在本地起前端工程,接口希望拉取服務(wù)端的實際數(shù)據(jù)而不是本地的mock數(shù)據(jù),而如果本地程序直接訪問遠程接口， 肯定會遇到跨域問題。
什么是跨域?實現(xiàn)跨域的多種方式?
這里我就不詳細介紹了,大家自行百度哈
為什么要實現(xiàn)前端跨域
一般來講,前后端分離的項目在大公司都會由后臺設(shè)置允許跨域訪問,因為后臺設(shè)置允許跨域是很簡單和方便的,但是某些情況下,一些小公司或者你工作的場所后臺不怎么配合的情況下,這就需要前端來配置跨域請求來方便我們使用接口
vue項目中的配置
以vue-cli搭建的項目為例, 在webpack配置文件 /config/index.js, 由于我們是在 開發(fā)環(huán)境 下使用，自然而然是要配置在dev里面,找到 proxyTable屬性,配置如下:
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
<!-- 使用proxyTable進行跨域設(shè)置 -->
proxyTable: {
'/api': {
target: 'http://www.abc.com', // 設(shè)置你調(diào)用的接口域名和端口號, 別忘了加http
changeOrigin: true, // 是否跨域
pathRewrite: {
// 這里理解成用'/api'代替target里面的地址，后面組件中我們掉接口時直接用api代替
// 比如我要調(diào)用'http://www.abc.com/user/add'，直接寫'/api/user/add'即可'
'^/api': '/'
}
}
},
// Various Dev Server settings
host: '0.0.0.0', // 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
},
上面proxyTable屬性中的配置,效果就是將本地8080端口的一個請求代理到了http://www.abc.com這個域名下
'http://localhost:8080/api' ===> 'http://www.abc.com/'
注意: 以上設(shè)置只能在開發(fā)環(huán)境下使用,打包后會出現(xiàn)路徑問題的 注意: Vue-cli提供的代理功能，只是讓你在開發(fā)環(huán)境下使用的，它(http-server-middleware)依賴于node環(huán)境，生產(chǎn)代碼應(yīng)該使用npm run build然后把dist放到nginx服務(wù)器上，在nginx上配置代理地址 Vue項目部署到nginx上的跨域設(shè)置
這還沒完，現(xiàn)在我們要將項目部署到nginx上，此時原來可以訪問的接口又訪問不到了，所以這個時候還要對nginx進行設(shè)置。
windows系統(tǒng)下載nginx 下載地址: nginx.org/en/docs/win…
選擇download進去選擇下載版本頁面
這里選擇穩(wěn)定版
下載即可
下載完成后目錄如下
進入cong文件,打開nginx.congf文件,找到server對象里面的listen屬性查看查看監(jiān)聽的端口號(默認80端口)
在nginx根目下啟動nginx.exe,如果出現(xiàn)一個黑窗口一閃而過,說明啟動成功,訪問localhost:80出現(xiàn)此頁面則訪問成功
如果訪問不成功有可能是端口被占用,修改上面的端口號,重啟nginx即可, 瀏覽器訪問localhost:XXXX Vue項目部署在nginx上的配置 vue項目運行 npm run build 進行項目打包記得有本地靜態(tài)資源文件的需要需要webpack配置, 如下:
config文件下的index.js文件找到build屬性 assetsPublicPath: '/' =>>>>> assetsPublicPath: './'
build文件下的untils文件中找到vue-style-loader 增加 publicPath: '../../'
此時打包后的dist文件可以不放置服務(wù)器環(huán)境下訪問, 直接打開dist文件目錄下的index.html就可以打開訪問
這時候的靜態(tài)資源都可以被加載出來,且不會報錯,但是api訪問的話還是會報錯
將打包后的dist文件里面的內(nèi)容復(fù)制一份到nginx文件中的html文件中
打開html文件清空里面的內(nèi)容,將復(fù)制的內(nèi)容粘貼進去
進入cong文件,
打開nginx.congf文件,找到server屬性在里面新增一條配置
location /api {proxy_pass http://localhost:4000/;}
你要訪問那個地址這里就修改為你要訪問的那個地址復(fù)制代碼
以上配置就全部完成啦
注意: 修改完nginx中的配置一定要重啟nginx才可以, 切記!!!
nginx簡單的操作命令
nginx.exe -s stop // stop是快速停止nginx，可能并不保存相關(guān)信息 nginx.exe -s quit // quit是完整有序的停止nginx，并保存相關(guān)信息 nginx.exe -s reload // 當配置信息修改，需要重新載入這些配置時使用此命令 nginx.exe -s reopen // 重新打開日志文件 nginx -v // 查看Nginx版本
以上就是我在項目中使用的配置啦,還有一些更高級的配置還沒有接觸使用到,供大家參考
總結(jié)
以上所述是小編給大家介紹的Vue中跨域及打包部署到nginx跨域設(shè)置方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
本篇文章主要介紹了VueJS事件處理器v-on的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
前端vue?a鏈接下載文件失敗的問題(未發(fā)現(xiàn)文件)
這篇文章主要介紹了前端vue?a鏈接下載文件失敗的問題(未發(fā)現(xiàn)文件)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)web滾動條分頁，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
在開發(fā)中發(fā)現(xiàn)其中一個頁面moutned調(diào)用了兩次，而其他頁面正常，表示很懵逼，然后查找原因，終于找到了，其實歸根到底是要知道m(xù)ounted的調(diào)用機制問題。這篇文章主要介紹了vue mounted 調(diào)用兩次的解決辦法,需要的朋友可以參考下2018-10-10
vue3.0基于views批量實現(xiàn)動態(tài)路由的方法(示例代碼)
以前vue項目中也有很多實現(xiàn)動態(tài)路由的方法,比如有一些項目涉及權(quán)限的可能會使用api請求路由數(shù)據(jù)在來createRouter,或者本地構(gòu)建使用routes.push來動態(tài)構(gòu)建路由, 今天介紹一種新的方式來基于某個文件夾批量構(gòu)建動態(tài)路由的方法,感興趣的朋友一起看看吧2024-12-12
最近在開發(fā)移動端項目，通過向左滑動出現(xiàn)刪除按鈕，點擊即可刪除，怎么實現(xiàn)這個功能呢，接下來小編給大家?guī)韺嵗a幫助大家學(xué)習(xí)vue項目實現(xiàn)左滑刪除功能，感興趣的朋友跟隨小編一起看看吧2021-05-05
這篇文章主要介紹了vue中關(guān)于computed的this指向問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了一個Vue的內(nèi)存泄露詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10
本文介紹了Pinia的使用方法及如何實現(xiàn)狀態(tài)持久化存儲,首先,介紹了Pinia的安裝和在main.ts中的掛載,介紹了getters和actions的使用方法,最后,詳細說明了如何通過Pinia-plugin-persistedstate插件實現(xiàn)Pinia狀態(tài)的持久化處理,包括插件的安裝、配置和在main.ts文件中的注冊2024-10-10
談一談vue請求數(shù)據(jù)放在created好還是mounted里好
這篇文章主要介紹了談一談vue請求數(shù)據(jù)放在created好還是mounted里好的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07