vite2 设置双页面(双入口)的方法

发布网友发布时间：2022-12-17 00:28

共1个回答

热心网友时间：2023-07-05 09:40

vite2的官网介绍了配置双页面的方法，但是有点简单，可能默认我们都是高手吧。这里分享一下省略掉的细节部分。

根据官网多页面应用模式介绍，我们先在vite.config.js里面做如下设置：

官网的介绍到这来就结束了，接下来怎么办？自己想呗。
首先确定一下 url 访问的问题，我们把根目录的 index.html 文件复制一份，改名为 project.html。

然后改一下里的的 <title>演示项目</title> ，作为区别。
然后在浏览器里输入 http://localhost:3000/project.html 我们可以看到标题发生了变化，说明入口设置成功。

虽然入口改完了，但是网页内容还是完全一样的，那是因为我们还没有改main.js和App.js。

我们打开 project.html 修改如下：

改 <script type="mole" src="/src/project-main.js"></script> 这一段即可，就是加载需要的main.js文件。

然后就是复制一份 main.js 和 App.js ，这样一个项目里面就做出来了两个入口的子项目。

在 main.js 里面改一下 import App from './project-App.vue' ，指定一下新的App.js即可。

剩下的根据项目需要修改即可。