Sapper firebase 托管损坏的 CSS 和其他资产链接答案

【问题标题】：Sapper firebase hosting broken CSS and other asset linksSapper firebase 托管损坏的 CSS 和其他资产链接
【发布时间】：2020-12-19 23:49:39
【问题描述】：

我正在尝试在 firebase 中托管我的 sapper 项目，但由于 firebase 添加了 baseUrl:/my-project-name/us-central1/ssr，我的所有 CSS 和其他资产链接都已损坏。所有资产链接都以 /my-project-name/us-central1/ssr 为前缀，并导致 404 错误。

我的 package.json

{
  "name": "Project_Name",
  "description": "Project_description",
  "version": "0.0.1",
  "engines": {
    "node": "10"
  },
  "scripts": {
    "dev": "sapper dev",
    "build": "sapper build --legacy",
    "export": "sapper export --legacy",
    "start": "node __sapper__/build",
    "cy:run": "cypress run",
    "cy:open": "cypress open",
    "test": "run-p --race dev cy:run",
    "serve": "firebase emulators:start --only functions",
    "shell": "firebase functions:shell",
    "fb_start": "npm run shell",
    "deploy": "npm run build && firebase deploy",
    "logs": "firebase functions:log"
  },
  "dependencies": {
    "compression": "^1.7.1",
    "express": "^4.17.1",
    "firebase-admin": "^8.10.0",
    "firebase-functions": "^3.6.1",
    "sirv": "^1.0.0"
  },
  "devDependencies": {
    "npm-run-all": "^4.1.5",
    "sapper": "^0.28.0",
    "svelte": "^3.17.3",
    "@babel/core": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/runtime": "^7.0.0",
    "@rollup/plugin-babel": "^5.0.0",
    "@rollup/plugin-commonjs": "^14.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
    "@rollup/plugin-replace": "^2.2.0",
    "rollup": "^2.3.4",
    "rollup-plugin-svelte": "^6.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "firebase-functions-test": "^0.2.0"
  }
}

我的 src/server.js 看起来像这样：

import sirv from "sirv";
import express from "express";
import compression from "compression";
import * as sapper from "@sapper/server";

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === "development";

const expressServer = express().use(
    compression({ threshold: 0 }),
    sirv("static", { dev }),
    sapper.middleware()
);

if (dev) {
    expressServer.listen(PORT, (err) => {
        if (err) console.log("error", err);
    });
}

export { expressServer };

我的 index.js 看起来像这样：

const functions = require("firebase-functions");
const { expressServer } = require("./__sapper__/build/server/server");

exports.ssr = functions.https.onRequest(expressServer);

我该如何解决这个问题？

谢谢。

【问题讨论】：

标签： javascript firebase firebase-hosting svelte sapper

【解决方案1】：

要修复您的资产路径，只需始终在资产导入中添加一个“/”，例如

    <link rel="stylesheet" href="/style/index.css" />

通过这样做，您的资产链接将不会被 firebase 函数的基本 URL 预先设置

【讨论】：