vue-router+nginx 非根路徑配置方法

xietao3 發布于2019-08-22 18:22 / 644人閱讀

摘要：的默認數據模式使用的來模擬一個完整的，于是當改變時，頁面不會重新加載。一般情況下，我們不喜歡丑丑的，類似于，可以使用路由的模式。模式是利用來實現頁面跳轉。但是有個問題，在使用的時候，我們需要添加一些配置。

vue-router 的默認數據hash模式-使用url的hash來模擬一個完整的URL，于是當URL改變時，頁面不會重新加載。

一般情況下，我們不喜歡丑丑的hash，類似于index.html#/matchResult，可以使用路由的history模式。history模式是利用history.pushState API來實現頁面跳轉。

但是有個問題，在使用nginx的時候，我們需要添加一些配置。

直接配置在根路徑下

直接配置在根路徑下，訪問的時候只用輸入http://yoursite.com，在nginx的配置如下

location / {
  try_files $uri $uri/ /index.html;
}

非根路徑配置

如果一個域名下有多個項目，那么使用根路徑配置就不合適了，我們需要在根路徑下指定一層路徑，比如說

A項目

http://yoursite.com/A

B項目

http://yoursite.com/B

nginx的配置

    location ^~/A {
            alias /XX/A;//此處為A的路徑
            index index.html;
            try_files $uri $uri/ /A/index.html;
    }
    location ^~/B {
            alias /XX/B;//此處為B的路徑
            index index.html;
            try_files $uri $uri/ /B/index.html;
    }

tip: 注意要用alias不能用root

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95796.html

VUE-Router按模塊配置、懶加載+ Windows中Nginx服務安裝、配置解決404

摘要：文章涉及到路由模塊化，懶加載，安裝，打包配置板塊。項目復雜，路由變多，代碼維護性降低，從路由模塊化開始一步步優化，解決各種。無法啟動服務，報錯參考資料發現端口沖突，已經在服務中已經配置端口。服務端口更改為。文章涉及到VUE路由模塊化，懶加載，nginx安裝，打包配置板塊。項目復雜，路由變多，代碼維護性降低，從路由模塊化開始一步步優化，解決各種BUG。參考了很多方法，會在文章中引用出來...

habren 2019-07-25 14:37 評論0 收藏0
Vue Router history模式的配置方法及其原理

摘要：但如果要使用模式，我們需要在后端進行額外配置。模式的配置方法我們來看看官方文檔是教我們怎么配置的模式。模式的配置實踐及原理強烈建議閱讀這部分之前，先看一下的這部分文檔和這部分文檔。只配置前端的情況首先，我們將設置為，但不配置后端。始發于我的博客 ryougifujino.com，歡迎訪問留言。 vue-router分為hash和history模式，前者為其默認模式，url的表現形式為...

Richard_Gao 2019-08-30 11:04 評論0 收藏0
Vue項目部署遇到的問題及解決方案

摘要：模式部署沒有什么問題，只要訪問到服務器上的，就可以訪問網站了。問題起因在做年度賬單項目的時候，項目部署的時候，用的是模式。這樣幾項配置后，就可以在子目錄下訪問網站，刷新也沒有問題。寫在前面 Vue-Router 有兩種模式，默認是 hash 模式，另外一種是 history 模式。 hash：也就是地址欄里的 # 符號。比如 http://www.example/#/hello，...

姘擱『 2019-08-23 14:38 評論0 收藏0
vue.js vue-router history模式路由，域名二級目錄子目錄nginx配置

摘要：修改三個配置，具體操作日后有時間更新，不懂私聊項目目錄配置實例項目路徑配置指向項目放在，但是指向，訪問就好了修改三個配置，具體操作日后有時間更新，不懂私聊1 const route = new Router({ mode: history, base: /doctor-html/, routes }) 2 assetsPublicPath: /doctor-html/, ...

focusj 2019-07-25 14:22 評論0 收藏0