眾所周知,我們?cè)谧銮昂蠖朔蛛x項(xiàng)目的時(shí)候,經(jīng)常需要在本地起前端工程,接口希望拉取服務(wù)端的實(shí)際數(shù)據(jù)而不是本地的mock數(shù)據(jù),而如果本地程序直接訪問(wèn)遠(yuǎn)程接口， 肯定會(huì)遇到跨域問(wèn)題。

什么是跨域?實(shí)現(xiàn)跨域的多種方式?

這里我就不詳細(xì)介紹了,大家自行百度哈

為什么要實(shí)現(xiàn)前端跨域

一般來(lái)講,前后端分離的項(xiàng)目在大公司都會(huì)由后臺(tái)設(shè)置允許跨域訪問(wèn),因?yàn)楹笈_(tái)設(shè)置允許跨域是很簡(jiǎn)單和方便的,但是某些情況下,一些小公司或者你工作的場(chǎng)所后臺(tái)不怎么配合的情況下,這就需要前端來(lái)配置跨域請(qǐng)求來(lái)方便我們使用接口

vue項(xiàng)目中的配置

以vue-cli搭建的項(xiàng)目為例, 在webpack配置文件 /config/index.js, 由于我們是在 開(kāi)發(fā)環(huán)境 下使用，自然而然是要配置在dev里面,找到 proxyTable屬性,配置如下:

dev: {
  // Paths
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  <!-- 使用proxyTable進(jìn)行跨域設(shè)置 -->
  proxyTable: {
    '/api': {
     target: 'http://www.abc.com', // 設(shè)置你調(diào)用的接口域名和端口號(hào), 別忘了加http
     changeOrigin: true, // 是否跨域
     pathRewrite: {
       // 這里理解成用'/api'代替target里面的地址，后面組件中我們掉接口時(shí)直接用api代替 
       // 比如我要調(diào)用'http://www.abc.com/user/add'，直接寫(xiě)'/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端口的一個(gè)請(qǐng)求代理到了http://www.abc.com這個(gè)域名下

'http://localhost:8080/api' ===> 'http://www.abc.com/'

注意: 以上設(shè)置只能在開(kāi)發(fā)環(huán)境下使用,打包后會(huì)出現(xiàn)路徑問(wèn)題的 注意: Vue-cli提供的代理功能，只是讓你在開(kāi)發(fā)環(huán)境下使用的，它(http-server-middleware)依賴(lài)于node環(huán)境，生產(chǎn)代碼應(yīng)該使用npm run build然后把dist放到nginx服務(wù)器上，在nginx上配置代理地址 Vue項(xiàng)目部署到nginx上的跨域設(shè)置

這還沒(méi)完，現(xiàn)在我們要將項(xiàng)目部署到nginx上，此時(shí)原來(lái)可以訪問(wèn)的接口又訪問(wèn)不到了，所以這個(gè)時(shí)候還要對(duì)nginx進(jìn)行設(shè)置。

windows系統(tǒng)下載nginx 下載地址: nginx.org/en/docs/win…

選擇download進(jìn)去選擇下載版本頁(yè)面

這里選擇穩(wěn)定版

下載即可

下載完成后目錄如下

進(jìn)入cong文件,打開(kāi)nginx.congf文件,找到server對(duì)象里面的listen屬性查看查看監(jiān)聽(tīng)的端口號(hào)(默認(rèn)80端口)

在nginx根目下啟動(dòng)nginx.exe,如果出現(xiàn)一個(gè)黑窗口一閃而過(guò),說(shuō)明啟動(dòng)成功,訪問(wèn)localhost:80出現(xiàn)此頁(yè)面則訪問(wèn)成功

如果訪問(wèn)不成功有可能是端口被占用,修改上面的端口號(hào),重啟nginx即可, 瀏覽器訪問(wèn)localhost:XXXX Vue項(xiàng)目部署在nginx上的配置 vue項(xiàng)目運(yùn)行 npm run build 進(jìn)行項(xiàng)目打包記得有本地靜態(tài)資源文件的需要需要webpack配置, 如下:

config文件下的index.js文件找到build屬性
assetsPublicPath: '/'  =>>>>>  assetsPublicPath: './' 

build文件下的untils文件中找到vue-style-loader
增加 publicPath: '../../'

此時(shí)打包后的dist文件可以不放置服務(wù)器環(huán)境下訪問(wèn), 直接打開(kāi)dist文件目錄下的index.html就可以打開(kāi)訪問(wèn)

這時(shí)候的靜態(tài)資源都可以被加載出來(lái),且不會(huì)報(bào)錯(cuò),但是api訪問(wèn)的話還是會(huì)報(bào)錯(cuò)

 將打包后的dist文件里面的內(nèi)容復(fù)制一份到nginx文件中的html文件中

打開(kāi)html文件清空里面的內(nèi)容,將復(fù)制的內(nèi)容粘貼進(jìn)去

進(jìn)入cong文件,

打開(kāi)nginx.congf文件,找到server屬性在里面新增一條配置

location /api {proxy_pass http://localhost:4000/;}

你要訪問(wèn)那個(gè)地址這里就修改為你要訪問(wèn)的那個(gè)地址復(fù)制代碼

以上配置就全部完成啦

注意: 修改完nginx中的配置一定要重啟nginx才可以, 切記!!!

nginx簡(jiǎn)單的操作命令

nginx.exe -s stop // stop是快速停止nginx，可能并不保存相關(guān)信息
nginx.exe -s quit // quit是完整有序的停止nginx，并保存相關(guān)信息
nginx.exe -s reload // 當(dāng)配置信息修改，需要重新載入這些配置時(shí)使用此命令
nginx.exe -s reopen // 重新打開(kāi)日志文件
nginx -v // 查看Nginx版本

以上就是我在項(xiàng)目中使用的配置啦,還有一些更高級(jí)的配置還沒(méi)有接觸使用到,供大家參考

總結(jié)

以上所述是小編給大家介紹的Vue中跨域及打包部署到nginx跨域設(shè)置方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

最新評(píng)論