快捷導(dǎo)航

詳解vue通過NGINX部署在子目錄或者二級目錄實(shí)踐

更新時間：2018年09月03日 10:18:52 作者：liugx

這篇文章主要介紹了詳解vue通過NGINX部署在子目錄或者二級目錄實(shí)踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1、修改 router/index.js

添加一行

base: 'admin',

2、然后修改 config/index.js

增加一行

const assetsPublicPath = '/admin/'

然后修改下面兩處assetsPublicPath 的值為定義的變量

3、部署時，通過NGINX的反向代理

首先，給需要部署的項(xiàng)目定義一個 NGINX 的 server

server {
    listen 8001;
    location / {
      # vue h5 history mode 時配置
      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;
    }
　　　　　# 這里是需要部署的二級目錄應(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以后，部署就完成了

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3父組件使用ref獲取子組件的屬性和方法
在vue3中父組件訪問子組件中的屬性和方法是需要借助于ref,蘇哦一本文小編給大家介紹了vue3父組件如何使用ref獲取獲取子組件的屬性和方法,文中詳細(xì)的代碼講解,需要的朋友可以參考下
2023-11-11
vue3+element-plus暗黑模式切換動畫圓弧過渡效果
文章介紹了如何在Vue 3和Element Plus中實(shí)現(xiàn)暗黑模式的切換,并通過動畫和圓弧過渡效果提升用戶體驗(yàn),本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2025-01-01
Vue裝飾器中的vue-property-decorator?和?vux-class使用詳解
這篇文章主要介紹了Vue裝飾器中的vue-property-decorator?和?vux-class使用詳解,通過示例代碼給大家介紹的非常詳細(xì)，對vue-property-decorator?和?vux-class的使用感興趣的朋友一起看看吧
2022-08-08
Vue路由切換的兩種方式示例詳解
這篇文章主要介紹了Vue路由切換的兩種方式,主要包括標(biāo)簽切換和js切換，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-12-12
對vue2.0中.vue文件頁面跳轉(zhuǎn)之.$router.push的用法詳解
今天小編就為大家分享一篇對vue2.0中.vue文件頁面跳轉(zhuǎn)之.$router.push的用法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
解決前后端分離 vue+springboot 跨域 session+cookie失效問題
這篇文章主要介紹了前后端分離 vue+springboot 跨域 session+cookie失效問題的解決方法，解決過程也很簡單 ,需要的朋友可以參考下
2019-05-05
Vue3基于rem比例H5縮放方案示例詳解
這篇文章主要為大家介紹了Vue3基于rem比例H5縮放方案示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11
如何啟動node.js文件的3個方法
這篇文章主要給大家介紹了關(guān)于如何啟動node.js文件的3個方法,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2023-07-07
vue結(jié)合el-table實(shí)現(xiàn)表格行拖拽排序(基于sortablejs)
這篇文章主要介紹了vue結(jié)合el-table實(shí)現(xiàn)表格行拖拽排序(基于sortablejs),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2024-01-01
vue3編寫帶提示的表格組件功能
本文介紹了如何使用Vue 3編寫一個帶提示的表格組件,并假設(shè)每行都有一個保存按鈕,如果需要全部保存,還會加上驗(yàn)證,感興趣的朋友一起看看吧
2025-02-02