nginx部署訪問(wèn)vue-cli搭建的項(xiàng)目的方法
更新時(shí)間：2018年02月12日 11:31:55 作者：草燈
本篇文章主要介紹了nginx部署訪問(wèn)vue-cli搭建的項(xiàng)目的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
從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)：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹 Vue3組件傳參的方式,包括父子組件、跨層級(jí)組件、兄弟組件的傳參,如父子組件通過(guò)屬性綁定和自定義事件雙向傳參,跨層級(jí)組件可利用 Provide/Inject 機(jī)制和 Pinia 狀態(tài)管理,兄弟組件可通過(guò)父組件中轉(zhuǎn)或 mitt 庫(kù)直接傳參,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了vue?注釋template中組件的屬性說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue3使用echarts并封裝echarts組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue 實(shí)現(xiàn)移動(dòng)端鍵盤(pán)搜索事件監(jiān)聽(tīng)
今天小編就為大家分享一篇vue 實(shí)現(xiàn)移動(dòng)端鍵盤(pán)搜索事件監(jiān)聽(tīng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
解決Vue+Electron下Vuex的Dispatch沒(méi)有效果問(wèn)題
這篇文章主要介紹了Vue+Electron下Vuex的Dispatch沒(méi)有效果的解決方案 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
下面小編就為大家分享一篇關(guān)閉Vue計(jì)算屬性自帶的緩存功能方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
詳解vue3?響應(yīng)式的實(shí)現(xiàn)原理
Vue.js?3.0?為了解決?Object.defineProperty?的這些缺陷，使用?Proxy?API?重寫(xiě)了響應(yīng)式部分，并獨(dú)立維護(hù)和發(fā)布整個(gè)?reactivity?庫(kù)，這篇文章主要介紹了vue3?響應(yīng)式的實(shí)現(xiàn)原理,需要的朋友可以參考下2022-06-06
Vue全局使用less樣式,組件使用全局樣式文件中定義的變量操作
這篇文章主要介紹了Vue全局使用less樣式,組件使用全局樣式文件中定義的變量操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了Vue如何設(shè)置button的disable屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目中怎樣嵌入其它項(xiàng)目的頁(yè)面
這篇文章主要介紹了vue項(xiàng)目中怎樣嵌入其它項(xiàng)目的頁(yè)面問(wèn)題,具有很好 的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10