vue-router 啓用 history 模式下的開發及非根目錄部署

vue-router 的 history 模式是個提高顏值的好東西，沒有了 hash 的路由看起來清爽許多。

開發的時候，如果我們使用 devServer 來啓動服務，由於一般不共用端口，我們一般不存在非根目錄的問題。

而刷新後 404 的問題可以藉助 historyApiFallback 來解決。

但當我們項目對外開放時，往往無法在域名根目錄下提供服務，這個時候資源的訪問路徑與開發時的根目錄就有了區別。

首先，我們通過 webpack 來配置一下項目中所有資源的基礎路徑，讓這份代碼在開發和生產環境中都可以正確找到資源。

// config/index.js
module.exports = {
    dev: {
        ...
        // 開發環境根目錄 - 服務根目錄 - 絕對路徑
        assetsPublicPath: '/'
        ...
    }，
    build: {
        ...
        // 生產環境根目錄 - 服務器訪問路徑 - 絕對路徑
        assetsPublicPath: '/test/project1/'
        ...
    }
}

// build/webpack.common.conf.js
const config = require('../config')
module.exports = {
    output: {
        publicPath: process.env.NODE_ENV === 'production'
            ? config.build.assetsPublicPath
            : config.dev.assetsPublicPath
    }
}

// build/webpack.dev.conf.js
const common = require('./webpack.common')
module.exports = merge(common, {
    devServer: {
        historyApiFallback: true
    }
}

然後在提供服務的服務器配置中做如下配置（以 nginx 爲例）：

location /test/project1 {
        alias .../project1; // 項目的真實路徑
        index index.html;
        try_files $uri $uri/ /test/project1/index.html;
}

try_files 會按順序檢查參數中的資源是否存在，並返回第一個找到的資源，如果都沒有找到，它會讓 nginx 內部重定向到會後一個參數。

對了，所以它的的作用是解決刷新 404 的問題。

這裏值得注意的是 try_files 的參數是絕對路徑。

至此，你開啓 history 模式的項目就可以順利的跑在任何路徑了。

歡迎大家點評指正點個贊~ wink

原文鏈接 -《vue-router 啓用 history 模式下的開發及非根目錄部署》