nginx部署訪問vue-cli搭建的項目的方法
更新時間：2018年02月12日 11:31:55 作者：草燈
本篇文章主要介紹了nginx部署訪問vue-cli搭建的項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
從vue-router官網(wǎng)了解到如果是用history模式構(gòu)建的vue項目打包后是需要后端配置支持的，而hash是不需要的，只不過地址會多了一個#/的后綴。使用hash模式構(gòu)建的項目打包后，我只需要使用webstorm之類的軟件打開訪問就能成功了。
但是我用history模式構(gòu)建的項目需要借助后臺技術(shù)，我這里選用的是nginx反向代理來部署項目。具體做法如下：
1、創(chuàng)建后臺服務(wù)器 對象
upstream mixVueServer{
server baidu.com;#這里是自己服務(wù)器域名
}
2、創(chuàng)建訪問端口和反向代理規(guī)則
server {
listen 8082;
server_name localhost;
location / {
root E:/mix_vue/dist;#定位到項目的目錄
#index index.html index.htm;
try_files $uri $uri/ /index.html;#根據(jù)官網(wǎng)這規(guī)則配置
}
location ~ \.php${
proxy_pass http://mixVueServer;#根據(jù)后端語言做反向代理處理跨域問題
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;
}
}
最后，直接地址欄輸入端口訪問：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹 Vue3組件傳參的方式,包括父子組件、跨層級組件、兄弟組件的傳參,如父子組件通過屬性綁定和自定義事件雙向傳參,跨層級組件可利用 Provide/Inject 機制和 Pinia 狀態(tài)管理,兄弟組件可通過父組件中轉(zhuǎn)或 mitt 庫直接傳參,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了vue?注釋template中組件的屬性說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue3使用echarts并封裝echarts組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
今天小編就為大家分享一篇vue 實現(xiàn)移動端鍵盤搜索事件監(jiān)聽，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
解決Vue+Electron下Vuex的Dispatch沒有效果問題
這篇文章主要介紹了Vue+Electron下Vuex的Dispatch沒有效果的解決方案 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
下面小編就為大家分享一篇關(guān)閉Vue計算屬性自帶的緩存功能方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue.js?3.0?為了解決?Object.defineProperty?的這些缺陷，使用?Proxy?API?重寫了響應(yīng)式部分，并獨立維護(hù)和發(fā)布整個?reactivity?庫，這篇文章主要介紹了vue3?響應(yīng)式的實現(xiàn)原理,需要的朋友可以參考下2022-06-06
Vue全局使用less樣式,組件使用全局樣式文件中定義的變量操作
這篇文章主要介紹了Vue全局使用less樣式,組件使用全局樣式文件中定義的變量操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vue如何設(shè)置button的disable屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue項目中怎樣嵌入其它項目的頁面問題,具有很好 的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10