Question

使用Preact CLI是否可以设置应用程序将在根目录之外托管的路径？

例如在http://mywebsite.com/relativepath/index.html

托管应用

Answer 1

您有几个问题需要解决：

<强> 1。获取Webpack以在html中输出正确的路径

这是通过在根文件夹中创建preact.config.js来完成的，并将以下内容放在那里

import java.io.Serializable;
import java.util.List;
import java.util.ArrayList;
import java.io.FileOutputStream;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.ObjectOutputStream;
import java.io.ObjectInputStream;

    public class MultiObjectSerialization {
        static String file = "helloFruits.txt";
        static ObjectOutputStream os;
        static ObjectInputStream is;

        public static void main(String[] args) throws IOException,
                ClassNotFoundException {
            Apples a = new Apples(1, "apple");
            Mango m = new Mango(2, "Mango");

            List<Object> fruits = new ArrayList<>();
            fruits.add(a);
            fruits.add(m);
            writeToFile(fruits);
            readFile();

        }

        public static void writeToFile(List<Object> fruits) throws IOException {
            os = new ObjectOutputStream(new FileOutputStream(file));
            os.writeObject(fruits);
            os.close();

        }

        public static void readFile() throws ClassNotFoundException, IOException {
            is = new ObjectInputStream(new FileInputStream(file));
            List<Object> input = (List<Object>) is.readObject();
            List<Object> checkList = new ArrayList<>();
            // this will contain the list of the objects
            for (Object l : input) {
                checkList.add(l.getClass().getSimpleName());
                if (l instanceof Apples) {
                    Apples app = (Apples) l;
                    System.out.println(app.id);
                    System.out.println(app.name);
                }
                if (l instanceof Mango) {
                    Mango app = (Mango) l;
                    System.out.println(app.id);
                    System.out.println(app.name);
                }
            }
            System.out.println(checkList);

            is.close();
        }
    }

    class Apples implements Serializable {
        private static final long serialVersionUID = 1L;
        int id;
        String name;

        public Apples(int id, String name) {
            this.id = id;
            this.name = name;
        }
    }

    class Mango implements Serializable {
        private static final long serialVersionUID = 1L;
        int id;
        String name;

        public Mango(int id, String name) {
            this.id = id;
            this.name = name;
        }
    }


  The Output is ::
    1
    apple
    2
    Mango
    [Apples, Mango]

<强> 2。在您的应用中设置导航和资源链接

在我看来，解决它的最佳方法是使用可在您的应用中使用的全局变量。再次，将preact.config.js编辑为以下内容：

export default (config) => {
  config.output.publicPath = '/relativepath/';
};

第3。路由

使用preact app时，导航应该没问题。但是，如果您尝试加载新的网址，例如www.myserver.com/relativepath/mything/9，服务器不知道它应该加载您的单页应用程序，网址为www.myserver.com/relativepath/index.html

您有两种选择：

a）服务器端路由

确保您对relativepath的所有请求（包括例如relativepath / mything / 9）将被重写到您应用的relativepath / index.html（如果使用Apache）。然后你的Javascript可以处理路由，例如preact路由器

b）客户端路由（推荐）

启用URL重新加载的更简单方法是使用哈希URL，从而避免在加载URL时通过服务器。

您的网址将类似于www.myserver.com/relativepath/#/mything/9 服务器在＃之后忽略该部分，并且仅加载（希望）/relativepath/index.html

您可以使用例如具有哈希历史记录的preact-router以避免服务器端路由，请在此处阅读https://github.com/developit/preact-router#custom-history

设置Preact CLI的基本URL

1 个答案: