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