詳解vue通過(guò)NGINX部署在子目錄或者二級(jí)目錄實(shí)踐
更新時(shí)間：2018年09月03日 10:18:52 作者：liugx
這篇文章主要介紹了詳解vue通過(guò)NGINX部署在子目錄或者二級(jí)目錄實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
1、修改 router/index.js
添加一行
base: 'admin',
2、然后修改 config/index.js
增加一行
const assetsPublicPath = '/admin/'
然后修改 下面兩處assetsPublicPath 的值為定義的變量
3、部署時(shí)，通過(guò)NGINX的反向代理
首先，給需要部署的項(xiàng)目定義一個(gè) NGINX 的 server
server {
listen 8001;
location / {
# vue h5 history mode 時(shí)配置
try_files $uri $uri/ /index.html;
root /home/html/travel_admin/dist;
index index.html index.htm;
}
}
再到配置域名的主配置server上做反向代理
server {
listen 80;
server_name web.zjj7.com;
location / {
# 這里是根目錄的項(xiàng)目
try_files $uri $uri/ /index.html;
root /home/html/travel/dist;
index index.html index.htm;
}
# 這里是需要部署的二級(jí)目錄應(yīng)用配置
location ^~/admin/ {
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:8001/;
}
}
這要重啟NGINX以后，部署就完成了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在vue3中父組件訪問(wèn)子組件中的屬性和方法是需要借助于ref,蘇哦一本文小編給大家介紹了vue3父組件如何使用ref獲取獲取子組件的屬性和方法,文中詳細(xì)的代碼講解,需要的朋友可以參考下2023-11-11
vue3+element-plus暗黑模式切換動(dòng)畫圓弧過(guò)渡效果
文章介紹了如何在Vue 3和Element Plus中實(shí)現(xiàn)暗黑模式的切換,并通過(guò)動(dòng)畫和圓弧過(guò)渡效果提升用戶體驗(yàn),本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01
Vue裝飾器中的vue-property-decorator?和?vux-class使用詳解
這篇文章主要介紹了Vue裝飾器中的vue-property-decorator?和?vux-class使用詳解,通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)vue-property-decorator?和?vux-class的使用感興趣的朋友一起看看吧2022-08-08
這篇文章主要介紹了Vue路由切換的兩種方式,主要包括標(biāo)簽切換和js切換，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
對(duì)vue2.0中.vue文件頁(yè)面跳轉(zhuǎn)之.$router.push的用法詳解
今天小編就為大家分享一篇對(duì)vue2.0中.vue文件頁(yè)面跳轉(zhuǎn)之.$router.push的用法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
解決前后端分離 vue+springboot 跨域 session+cookie失效問(wèn)題
這篇文章主要介紹了前后端分離 vue+springboot 跨域 session+cookie失效問(wèn)題的解決方法，解決過(guò)程也很簡(jiǎn)單 ,需要的朋友可以參考下2019-05-05
這篇文章主要為大家介紹了Vue3基于rem比例H5縮放方案示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要給大家介紹了關(guān)于如何啟動(dòng)node.js文件的3個(gè)方法,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
vue結(jié)合el-table實(shí)現(xiàn)表格行拖拽排序(基于sortablejs)
這篇文章主要介紹了vue結(jié)合el-table實(shí)現(xiàn)表格行拖拽排序(基于sortablejs),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01
本文介紹了如何使用Vue 3編寫一個(gè)帶提示的表格組件,并假設(shè)每行都有一個(gè)保存按鈕,如果需要全部保存,還會(huì)加上驗(yàn)證,感興趣的朋友一起看看吧2025-02-02