Vue3+vite多个html页面配置多入口文件，以和单个页面路由配置，宝妈级教学，值得一看

江.同学

2024-04-23 帮助1人

Vue3 Vite正式开始咯多页面配置

第一步（创建项目）

我们打开编辑工具打开命令

1.输入创建命令

npm create vite@latest

2.为你的项目起个名字

PS I:\Web\练手\Test> npm create vite@latest
npx: installed 6 in 1.549s
? Project name: » vite-project

3.选择框架vue，上下移动建，回车确认

npx: installed 6 in 1.549s
√ Project name: ... test
? Select a framework: » - Use arrow-keys. Return to submit.
> vanilla
vue
react
preact
lit
svelte

3.这里我们选择vue，不适用typescript，上下移动建，回车确认

√ Project name: ... test
√ Select a framework: » vue
? Select a variant: » - Use arrow-keys. Return to submit.
> vue
vue-ts

4.我们得到一个全新项目

学新通

5.接下来我们还需要初始化项目

cd ./项目名
npm install

6.接下里我们启动项目，下面就是项目在浏览器访问的路径了，打开浏览器访问即可

npm run dev

学新通

现在项目创建完成了，我们开始正式的配置，以上为小白准备

第二步（多页面配置）

1.把项目跟目录下面src目录的文件全部删除，删除项目根目录下的index.html

3.在项目根目录下创建一个index.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>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/index/index_main.js"></script>
</body>
</html>

3.在项目根目录下创建一个about.html，这里引入的js文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/about/about-main.js"></script>
</body>
</html>

4.在项目根目录下src创建index目录，在里面创建Index.vue以及index_main.js文件

Index.vue

<template>
<div>
index 页面
</div>
</template>
<script setup>
</script>
<style scoped>
</style>

index_main.js

import { createApp } from 'vue'
import App from './Index.vue'
createApp(App).mount('#app')

5.在项目根目录下src创建about目录，在里面创建About.html以及about_main.js文件

About.html

<template>
about 页面
</template>
<script>
</script>
<style scoped>
</style>

About_main.js

import {createApp} from 'vue'
import App from './About.vue'
createApp(App).use(router).mount('#app')

6.页面以及创建完成我们只需要在vite.config.js配置多文件入口

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
export default defineConfig({
plugins: [vue()],
build: {
rollupOptions: {
input: {
index: path.resolve(__dirname, 'index.html'),
about: path.resolve(__dirname, 'about.html'),
}, output: {
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: "static/js/[name]-[hash].js",
assetFileNames: "static/[ext]/name-[hash].[ext]"
}
},
}
})

在命令中连按两次 Ctrl C，然后 npm run dev 重新启动项目，各位端口的配置可能与我不同，输入自己配置的端口或者显示的端口就好了

http://localhost:3002/ index.html 页面

http://localhost:3002/About.html About.html 页面

第三步（页面路由配置）

1.我依然打开命令输入进行安装路由配置

npm install vue-router -s

2.我们只是在About.html配置路由，我们打开about目录创建views目录下面创建01.vue 02.vue组件

01.vue

<template>
about 01组件
</template>
<script>
export default {
name: "01"
}
</script>
<style scoped>
</style>

02.vue

<template>
about 02组件
</template>
<script>
export default {
name: "02"
}
</script>
<style scoped>
</style>

3.我们打开about目录创建router目录下在创建index.js

import {createRouter, createWebHashHistory} from 'vue-router'
const a1=()=>import('../views/01.vue')
const a2=()=>import('../views/02.vue')
const routes = [{
path:'',
name:'a1',
component:a1
},{
path:'/a2',
name:'a2',
component:a2
},]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router

4.我们打开about目录下的about_main.js引入router目录下的idnex.js

import {createApp} from 'vue'
import App from './About.vue'
import router from './router'
createApp(App).use(router).mount('#app')

5.我们最后一步只需要在about目录下打开About.vue

<template>
about 页面
<div>
<router-link to="/">组件1</router-link>
---
<router-link to="/a2">组件2</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style scoped>
.router-link-active {
background-color: #42b983;
}
</style>

我们直接打开浏览器，输入About.html 地址就能看到路由效果

如果小伙伴嘛在web编程中遇见的困难都可以积极留言，我会尽量为你解决，大概每天中午1左右在线，其余时间处理更新文章之外很少在线

这篇好文章是转载于：学新通技术网

Vue3+vite多个html页面配置多入口文件，以和单个页面路由配置，宝妈级教学，值得一看

Vue3 Vite正式开始咯多页面配置

第一步（创建项目）

第二步（多页面配置）

第三步（页面路由配置）

如果小伙伴嘛在web编程中遇见的困难都可以积极留言，我会尽量为你解决，大概每天中午1左右在线，其余时间处理更新文章之外很少在线

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐

Vue3+vite多个html页面配置多入口文件，以和单个页面路由配置，宝妈级教学，值得一看

Vue3 Vite正式开始咯 多页面配置

第一步（创建项目）

第二步（多页面配置）

第三步（页面路由配置）

如果小伙伴嘛在web编程中遇见的困难都可以积极留言，我会尽量为你解决，大概每天中午1左右在线，其余时间处理更新文章之外很少在线

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐

Vue3 Vite正式开始咯多页面配置