更改 Svelte 构建主页

Question

我一直在构建一个 svelte 项目，并将文件放在我的 apache2 html 目录的子目录中，该目录在网上显示为：

https://websiteName.com/dir/（所有构建文件都在这里）

这是由运行完成的 npm build run 并将项目文件夹的内容复制到该目录。唯一的问题是代码认为它在 http://websiteName.com/ directory. And so when it goes to call the other build files it gets a 404. So as an example it is trying to grab bundle.js from https://websiteName.com/bundle.js when it actually exists at https://websiteName.com/dir/bundle.js

我已经尝试更改我的 package.json 以反映这一点，因为在 React 中解决此问题的方法是像这样添加主页属性：

{
  "name": "svelte-app",
  "version": "1.0.0",
  "homepage": "/dir",
  "private": true,
  "scripts": {
  }
 /** **/
}

改完之后我又重新编译了，问题好像没有解决。我找不到在线是否有针对此的 svelte 特定关键字，所以我想知道是否有人知道修复可能是什么。

Answer 1

我猜你正在使用 Svelte's template for Rollup。

那么我的建议是：

首先，将 public 目录中的所有内容移动到 public/dir 下，以便 dev 设置在其他更改后继续工作，您应用程序在您的产品设置的类似路径中。
更改（现在）public/dir/index.html 中 <script> 和 <link> 标签的网址，方法是在它们前面加上 /dir:

    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="stylesheet" href="/global.css" />
    <link rel="stylesheet" href="/build/bundle.css" />

    <script defer src="/build/bundle.js"></script>

变成：

    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="stylesheet" href="/global.css" />
    <link rel="stylesheet" href="/build/bundle.css" />

    <script defer src="/build/bundle.js"></script>

最后，将 rollup.config.js 中的 output.file 改成 public/dir/build 而不是 public/build:

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    ...

变成：

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/dir/build/bundle.js'
    },
    ...

这样您就可以在开发期间在 http://localhost:8080/dir/ 访问您的应用程序，并将 public/dir 的内容移动到您的 Apache 目录，该应用程序将继续在 /dir 下运行目录。

更改 Svelte 构建主页

Change Svelte Build Homepage

svelte