官網(wǎng)介紹
vite2的官網(wǎng)介紹了配置雙頁面的方法，但是有點(diǎn)簡(jiǎn)單，可能默認(rèn)我們都是高手吧。這里分享一下省略掉的細(xì)節(jié)部分。
根據(jù)官網(wǎng) 多頁面應(yīng)用模式 介紹，我們先在vite.config.js里面做如下設(shè)置：
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')
}
}
}
...
}
摸索階段
官網(wǎng)的介紹到這來就結(jié)束了，接下來怎么辦？自己想唄。
首先確定一下 url 訪問的問題，我們把根目錄的 index.html 文件復(fù)制一份，改名為 project.html。
入口文件
改入口文件
然后 改一下 里的的 <title>演示項(xiàng)目</title>，作為區(qū)別。
然后在瀏覽器里輸入 http://localhost:3000/project.html 我們可以看到標(biāo)題發(fā)生了變化，說明入口設(shè)置成功。
設(shè)置入口
改main和App
雖然入口改完了，但是網(wǎng)頁內(nèi)容還是完全一樣的，那是因?yàn)槲覀冞€沒有改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>演示項(xiàng)目</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文件。
然后就是復(fù)制一份 main.js 和 App.js ，這樣一個(gè)項(xiàng)目里面就做出來了兩個(gè)入口的子項(xiàng)目。
main和app
在 main.js 里面 改一下 import App from './project-App.vue'，指定一下新的App.js即可。
剩下的根據(jù)項(xiàng)目需要修改即可。
