小編給大家分享一下nginx如何部署訪問(wèn)vue-cli搭建的項(xiàng)目，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)主營(yíng)可克達(dá)拉網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,APP應(yīng)用開(kāi)發(fā),可克達(dá)拉h(huán)5微信小程序搭建,可克達(dá)拉網(wǎng)站營(yíng)銷(xiāo)推廣歡迎可克達(dá)拉等地區(qū)企業(yè)咨詢(xún)

從vue-router官網(wǎng)了解到如果是用history模式構(gòu)建的vue項(xiàng)目打包后是需要后端配置支持的，而hash是不需要的，只不過(guò)地址會(huì)多了一個(gè)#/的后綴。使用hash模式構(gòu)建的項(xiàng)目打包后，我只需要使用webstorm之類(lèi)的軟件打開(kāi)訪問(wèn)就能成功了。

但是我用history模式構(gòu)建的項(xiàng)目需要借助后臺(tái)技術(shù)，我這里選用的是nginx反向代理來(lái)部署項(xiàng)目。具體做法如下：

1、創(chuàng)建后臺(tái)服務(wù)器 對(duì)象

upstream mixVueServer{ 
  server baidu.com;#這里是自己服務(wù)器域名 
}

2、創(chuàng)建訪問(wèn)端口和反向代理規(guī)則

server { 
    listen    8082; 
    server_name localhost; 

    location / { 
      root  E:/mix_vue/dist;#定位到項(xiàng)目的目錄 
      #index index.html index.htm; 
    try_files $uri $uri/ /index.html;#根據(jù)官網(wǎng)這規(guī)則配置 
    } 
  location ~ \.php${ 
    proxy_pass http://mixVueServer;#根據(jù)后端語(yǔ)言做反向代理處理跨域問(wèn)題 
    proxy_set_header  Host  $host; 
    proxy_set_header  X-Real-IP  $remote_addr; 
  } 
   
    error_page  500 502 503 504 /50x.html; 
    location = /50x.html { 
      root  html; 
    } 
  }

最后，直接地址欄輸入端口訪問(wèn)：

看完了這篇文章，相信你對(duì)“nginx如何部署訪問(wèn)vue-cli搭建的項(xiàng)目”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！