nginx部署訪問vue-cli搭建的項(xiàng)目的方法
更新時(shí)間：2018年02月12日 11:31:55 作者：草燈
本篇文章主要介紹了nginx部署訪問vue-cli搭建的項(xiàng)目的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
從vue-router官網(wǎng)了解到如果是用history模式構(gòu)建的vue項(xiàng)目打包后是需要后端配置支持的，而hash是不需要的，只不過地址會(huì)多了一個(gè)#/的后綴。使用hash模式構(gòu)建的項(xiàng)目打包后，我只需要使用webstorm之類的軟件打開訪問就能成功了。
但是我用history模式構(gòu)建的項(xiàng)目需要借助后臺(tái)技術(shù)，我這里選用的是nginx反向代理來部署項(xiàng)目。具體做法如下：
1、創(chuàng)建后臺(tái)服務(wù)器 對(duì)象
upstream mixVueServer{
server baidu.com;#這里是自己服務(wù)器域名
}
2、創(chuàng)建訪問端口和反向代理規(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ù)后端語言做反向代理處理跨域問題
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;
}
}
最后，直接地址欄輸入端口訪問：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中ref引用操作DOM元素的實(shí)現(xiàn)
本文主要介紹了vue中ref引用操作DOM元素的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
在Vue和Django進(jìn)行前后分離開發(fā)時(shí),經(jīng)常會(huì)遇到跨域和CSRF令牌驗(yàn)證問題,本文詳細(xì)介紹了如何在Django后端設(shè)置視圖獲取CSRF令牌,并在Vue前端進(jìn)行配置以確保安全的數(shù)據(jù)交互,文章提供了后端視圖創(chuàng)建、settings配置以及前端axios請(qǐng)求封裝的具體方法2024-09-09
vue項(xiàng)目安裝scss常見報(bào)錯(cuò)處理方式
這篇文章主要介紹了vue項(xiàng)目安裝scss常見報(bào)錯(cuò)處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue基礎(chǔ)之ElementUI的表單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue中實(shí)現(xiàn)子組件相互切換且數(shù)據(jù)不丟失的策略詳解
項(xiàng)目為數(shù)據(jù)報(bào)表,但是一個(gè)父頁面中有很多的子頁面,而且子頁面中不是相互關(guān)聯(lián),但是數(shù)據(jù)又有聯(lián)系,所以本文給大家介紹了vue中如何實(shí)現(xiàn)子組件相互切換,而且數(shù)據(jù)不會(huì)丟失,并有詳細(xì)的代碼供大家參考,需要的朋友可以參考下2024-03-03
vue動(dòng)態(tài)添加表單validateField驗(yàn)證功能實(shí)現(xiàn)
這篇文章主要介紹了vue動(dòng)態(tài)添加表單validateField驗(yàn)證功能實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
Vue-cli3項(xiàng)目配置Vue.config.js實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于Vue-cli3項(xiàng)目配置Vue.config.js的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
本篇文章主要介紹了詳解Vue快速零配置的打包工具——parcel，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue的hash跳轉(zhuǎn)原理，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
npm安裝vue@cli報(bào)錯(cuò)的簡(jiǎn)單處理方式
最近工作中遇到了報(bào)錯(cuò),現(xiàn)在將解決的辦法分享給大家,下面這篇文章主要給大家介紹了關(guān)于npm安裝vue@cli報(bào)錯(cuò)的簡(jiǎn)單處理方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12