nginx部署使用history模式的vue項目詳細配置【可多級目錄】

介紹

本文是篇詳細的介紹vue項目在history模式下發布時build,項目如何配置，nginx如何配置，才能正常的使用歷史模式。或者在二級目錄下，多級路徑下也能正常使用歷史模式。

本文的例子中假設，nginx全部都是配置在 flytree.can 域名下。
且路由中配置有以下路徑：

const routes = [
  { path: '/', redirect: "/index"},
  { path: '/login', component: Login },
  { path: '/welcome', component: Welcome }
]

一級路徑的配置

應用放在服務器根目錄下。路由也就是域名后的第一級路徑。如：

url	對應打開路由
http://www.flytree.can/login	/login
http://www.flytree.can/welcom	/welcom

路由配置

const router = new VueRouter({
  mode: 'history',
  routes
})

nginx配置

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

二級路徑的配置

應用不是放在服務器根目錄下，而是location有上下文的。如配置了web上下文，則：

url	對應打開路由
http://www.flytree.can/web/login	/login
http://www.flytree.can/web/welcom	/welcom

路由配置

如果在ngnix代理的時候不是配置到根路徑/的話，則要配置base,它指定的是應用的基路徑。例如，如果整個單頁應用服務在 /app/ 下，然后 base 就應該設為 "/app/"。
router/index.js配置:

const vueRouter = new Router({
    mode: "history",
    base: "/web",
    routes: routes
})

配置了base后，應用就會在base之后打開了，如，后面配置了個/login路由，則是在/web/login中打開此路由。

項目config配置

注：由於項目里使用的是老版本的vue-cli，新版本@vue/cli配置會在旁說明。

老版本的配置文件在config/index.js中，如果是cli 3.x后續版本，需在項目 (和 package.json 同級的) 根目錄中創建vue.config.js文件進行配置。

const path = require('path');
module.exports = {
    module.exports = {
        build: {
            // 指定生成的 index.html 的輸出路徑 (相對於 配置文件所在路徑)。也可以是一個絕對路徑。
            // 新版本使用：indexPath
            index: path.resolve(__dirname, '../web/index.html'),
            // 指定生成的 資源 的輸出的目錄 (相對於 配置文件所在路徑)。此，build后到dist目錄下。注意目標目錄在構建之前會被清除。
            // 新版本使用：outputDir
            assetsRoot: path.resolve(__dirname, '../web'),
            // 指定除了index.html外的靜態資源的目錄
            // 新版本使用：assetsDir
            assetsSubDirectory: 'public',
            // 部署應用包時的基本 URL。指定打包后，index.html里面引用資源的的相對地址。
            // 這個值也可以被設置為空字符串 ('') 或是相對路徑 ('./')，這樣所有的資源都會被鏈接為相對路徑
            // 如我在index.html中應用了張在pulblic下的圖片flytree.jpg
            // 則引用是 src='./public/flytree.jpg'
            // 新版本：publicPath
            assetsPublicPath: '/web/',
        }
    }
}

配置以后bulid后，部署的文件會在項目下web文件下。

外部文件應用配置

如配置了assetsPublicPath路徑，如這里配置的是./相對路徑，則在發布的時候要將引用的靜態資源設置在，其路徑里,如：

<img src="./public/img/flytree.png">

<script>
    axios.get('./public/JSON/data.json')
</script>

為了方便開發和發布時使用靜態資源，可以：

// main.js中配置
window.base_file_url =
process.env.NODE_ENV === 'production' ? '.' : ''
// 使用
axios.get(base_file_url + '/public/JSON/data.json')

nginx的配置

location /web {
    alias F:/Program_D/work/demo/web/;
    try_files  $uri $uri/ /web/index.html;
}

如此，項目就部署在http://www.flytree.cam/web下了。

多級路徑的配置

可能會有人說，誰TM竟然要這么麻煩，搞這么多級路徑干啥。但事實就是還真能遇到就要配這么多級的路徑。要不然就不會有本文了。😂

router配置

注：這里base可以配置多級路徑，比如:

const vueRouter = new Router({
    mode: "history",
    base: "/app/web",
    routes
})

那么，當前應用將部署在/app/web下:

url	對應打開路由
http://www.flytree.can/app/web/login	/login
http://www.flytree.can/app/web/welcom	/welcom

若要配置多級路徑，其它的配置也要作修改，

項目config配置

配置后，build后會生成一個有層級的文件夾。

const path = require('path');
module.exports = {
    module.exports = {
        build: {
            // 指定生成的 index.html 的輸出路徑 (相對於 配置文件所在路徑)。也可以是一個絕對路徑。
            // 新版本使用：indexPath
            index: path.resolve(__dirname, '../app/web/index.html'),
            // 指定生成的 資源 的輸出的目錄 (相對於 配置文件所在路徑)。此，build后到dist目錄下。注意目標目錄在構建之前會被清除。
            // 新版本使用：outputDir
            assetsRoot: path.resolve(__dirname, '../app/web'),
            // 指定除了index.html外的靜態資源的目錄
            // 新版本使用：assetsDir
            assetsSubDirectory: 'public',
            // 部署應用包時的基本 URL。指定打包后，index.html里面引用資源的的相對地址。
            // 這個值也可以被設置為空字符串 ('') 或是相對路徑 ('./')，這樣所有的資源都會被鏈接為相對路徑
            // 如我在index.html中應用了張在pulblic下的圖片flytree.jpg
            // 則引用是 src='./public/flytree.jpg'
            // 新版本：publicPath
            assetsPublicPath: '/app/web/',
        }
    }
}

nginx配置

 location /app/web/ {
    # alias F:/Program_D/work/demo/app/web/;
    root F:/Program_D/work/demo/;
    try_files  $uri $uri/ /app/web/index.html;
}

原理分析

就拿這個多級的舉例吧。

url	對應打開路由
http://www.flytree.can/app/web/login	/login
http://www.flytree.can/app/web/welcom	/welcom

當訪問 http://www.flytree.can/app/web/login 時，

1. nginx 配置了上下文 /app/web/。所以$uri的值是/login。
2. try_files 會將此路徑，響應為 root + /app/web/index.html。
3. 瀏覽器打開了index.html也就是history模式的vue項目，此時vue-router匹配路由/login，將此路由內容插入到index.html中。

補充說明

nginx配置的一些說明

1. 關於 try_files

try_files  $uri $uri/ /index.html;

這個命令可以將其后的參數，響應到最后一個參數的路徑中去。在這里通俗來說，就是匹配到啥$uri我都給你響應index.html。前提是有index.html,否則會響應到別的location配置中去（有的話），或404。

2. root 和 alias 的區別
   首先這兩玩意都是指定服務器的響應文件路徑的。

• 使用root配置時，則配置到 項目路徑的上層路徑。此時，nginx會去讀取的文件路徑是，root + location的上下文（其后面跟着的）拼成的路徑。
• alias 就配置到項目的完整的路徑，配置到index這一級。nginx會去讀取的文件路徑時就會按照alias指定的路徑讀取。

參考內容

1. 關於 try_files $uri $uri/ /index.html的說明：
   Niginx中Vue Router 歷史（history）模式的配置
2. vue-router history模式在nginx二級目錄下的配置