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

趙大仁發表於2018-12-21
Vue模式

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

相關文章