解決 preact 資源請求路徑錯誤的問題

最後更新於 2022 年 6 月 27 日

情況說明

今天我有一個檔案 config.js 放在 assets 目錄底下,這個檔案用於給使用者自行設定 API 的 url 或者調整其他一些基本設定。

原先我使用 preact-router 最基本的方式創建路由,預設模式為 history,當我在根目錄底下請求這個 config.js 會是正常的,路徑為 http://localhost/assets/config.js,但當我切換到其他頁面,例如:http://localhost/user 的時候,請求路徑就會變為 http://localhost/device/assets/config.js,為了避免這種情況發生,永遠向 root 請求資源,我們需要將 router 改為 hash 模式。

正確請求 解決 preact 資源請求路徑錯誤的問題
錯誤請求 解決 preact 資源請求路徑錯誤的問題

解決辦法

解決以上情況有兩種辦法:

  1. 將 router mode 改為 hash
  2. 請求資源一律向 root 請求

將 router mode 改為 hash

根據官方文檔的說明,我們可以在 Router 加上 history={createHashHistory()} 來自定義 history,透過這一步我們就能解決上述的問題。

import { Router } from "preact-router";
import { createHashHistory } from 'history';

const App = () => {
    return (
        <Router history={createHashHistory()}>
            <Home path="/" />
            <User path="/user"/>
            <Login path="/login" />
        </Router>
    );
}

export default App;

然後可能會遇到這個 error:

createHistory is not a function

// 或者是

Object(...) is not a function

其實就是沒安裝 history 而已,補裝上就可以了。

npm i history --save

資源一律向 root 請求

按照下方方式配置的話,可以將指定目錄底下的所有文件複製到構建資料夾中(ex: 將 /src/assets 底下所有文件複製到 /build 資料夾底下)。

如此一來,當你的路徑產生變化,資源請求一樣也是會從 root 請求:

  • 原來: http://www.example.com/users/config.js
  • 現在: http://www.example.com/config.js

首先需要安裝 npm install copy-webpack-plugin@^6.0.0

接著修改 preact.config.js,改為以下配置:

import CopyWebpackPlugin from "copy-webpack-plugin";
import path from "path";

export default function (config, env, helpers) {
  config.plugins.push(
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "*",
          context: path.resolve(__dirname, "src/assets"),
        },
      ],
    })
  );
}

preact-cli v3 之後會自動將 src/static 資料夾底下的文件保留在根目錄中,就不需要手動設定了。

參考資料

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論