Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
8ceea18e 1 parent 66c3692c

vite多页面配置

Inline Side-by-side
Showing 11 changed files with 154 additions and 2 deletions
<template>
<router-view></router-view>
</template>
<script>
export default {
data () {
return {
}
},
mounted () {
},
methods: {
}
}
</script>
<!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 App1</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./main.js"></script>
</body>
</html>
import { createApp } from 'vue';
import App from './App.vue';
// import store, { key } from './store/index';
import router from './router';
createApp(App).use(router).mount('#app');
import { createRouter, createWebHashHistory } from 'vue-router';
const router = createRouter({
history: createWebHashHistory('/index.html'),
routes: [
{
path: '/',
name: 'mono2',
component: () => import('./views/index.vue'),
},
],
});
export default router;
<template>
<div class="">456</div>
</template>
<script>
export default {
data () {
return {
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="less" scoped>
</style>
<template>
<router-view></router-view>
</template>
<script>
export default {
data () {
return {
}
},
mounted () {
},
methods: {
}
}
</script>
<!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 App1</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./main.js"></script>
</body>
</html>
import { createApp } from 'vue';
import App from './App.vue';
// import store, { key } from './store/index';
import router from './router';
createApp(App).use(router).mount('#app');
import { createRouter, createWebHashHistory } from 'vue-router';
const router = createRouter({
history: createWebHashHistory('/index.html'),
routes: [
{
path: '/',
name: 'mono2',
component: () => import('./views/index.vue'),
},
],
});
export default router;
<template>
<div class="">123</div>
</template>
<script>
export default {
data () {
return {
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="less" scoped>
</style>
......@@ -15,6 +15,7 @@ export default ({ command, mode }) => {
return defineConfig({
// root: '',
// root: './src/packages', // 多页面应用配置入口根目录
base: viteEnv.VITE_BASE, // 开发或生产环境服务的公共基础路径。
// base: isProd ? '/' : '/f/voice/', // 开发或生产环境服务的公共基础路径。
// mode: '', // 在配置中指明将会把 serve 和 build 时的模式 都 覆盖掉。也可以通过命令行 --mode 选项来重写。
......@@ -29,7 +30,7 @@ export default ({ command, mode }) => {
// targets: ['defaults', 'not IE 11']
// }), // Vite 的默认旧版浏览器支持时提供此插件本机ESM的支持。
],
// publicDir: '', // 作为静态资源服务的文件夹。这个目录中的文件会在开发中被服务于 /，在开发模式时，会被拷贝到 outDir 的根目录，并没有转换，永远只是复制到这里。该值可以是文件系统的绝对路径，也可以是相对于项目的根目录路径。
publicDir: 'public', // 作为静态资源服务的文件夹。这个目录中的文件会在开发中被服务于 /，在开发模式时，会被拷贝到 outDir 的根目录，并没有转换，永远只是复制到这里。该值可以是文件系统的绝对路径，也可以是相对于项目的根目录路径。
// cacheDir: '', // 存储缓存文件的目录。此目录下会存储预打包的依赖项或 vite 生成的某些缓存文件，使用缓存可以提高性能。如需重新生成缓存文件，你可以使用 --force 命令行选项或手动删除目录。此选项的值可以是文件的绝对路径，也可以是以项目根目录为基准的相对路径。
resolve: {
alias: { // 将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象，或一个 { find, replacement } 的数组. 当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会被原封不动地使用，因此无法被正常解析。 更高级的自定义解析方法可以通过 插件 实现。
......@@ -97,7 +98,8 @@ export default ({ command, mode }) => {
},
input: { // 多页面应用模式
main: path.resolve(__dirname, 'index.html'),
// main1: path.resolve(__dirname, 'index1.html'), // router需要配置入口, 没有找到更好方案，同级新增类似文件可以达到效果
// mono1: path.resolve(__dirname, 'src/packages/mono1/index.html'),
// mono2: path.resolve(__dirname, 'src/packages/mono2/index.html'),
}
},
},
......