vite2 设置双页面（双入口）的方法
2021-08-20 本文已影响0人
自然框架
官网介绍
vite2的官网介绍了配置双页面的方法，但是有点简单，可能默认我们都是高手吧。这里分享一下省略掉的细节部分。
根据官网 多页面应用模式 介绍，我们先在vite.config.js里面做如下设置：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
...
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
nested: resolve(__dirname, 'project.html')
}
}
}
...
}
摸索阶段
官网的介绍到这来就结束了，接下来怎么办？自己想呗。
首先确定一下 url 访问的问题，我们把根目录的 index.html 文件复制一份，改名为 project.html。
入口文件
改入口文件
然后 改一下 里的的 <title>演示项目</title>，作为区别。
然后在浏览器里输入 http://localhost:3000/project.html 我们可以看到标题发生了变化，说明入口设置成功。
设置入口
改main和App
虽然入口改完了，但是网页内容还是完全一样的，那是因为我们还没有改main.js和App.js。
我们打开 project.html 修改如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>演示项目</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/project-main.js"></script>
</body>
</html>
改 <script type="module" src="/src/project-main.js"></script> 这一段即可，就是加载需要的main.js文件。
然后就是复制一份 main.js 和 App.js ，这样一个项目里面就做出来了两个入口的子项目。
main和app
在 main.js 里面 改一下 import App from './project-App.vue'，指定一下新的App.js即可。
剩下的根据项目需要修改即可。
