vite配置多页面应用

通过配置多页面应用，从而将给子模块依赖分隔开各自加载，可以减少初始资源请求，加快访问速度。

比如将登录页单独做配置，通过/login/进行访问，不需要初始资源的加载支持。

修改vite.config.js

vite.config.js 变更

最主要的就是root配置变更，更改为src目录，此处可进行多模块管理，比如项目中的 login

__dirname 是vite.config.js所在的目录。

如果不变更 root 配置，继续以项目根目录进行多页配置，无法跳转到其他页面

root 根目录变更后，需要注意的点

• publicDir 配置，原来是项目目录下的public，root 变更后，则需要重新指定，resolve(__dirname,'./public')

• alias 通常会配置目录别名，以前./src指向 src 目录，现在 root 变更，需要手动指定resolve(__dirname,'./src') ,不然原有资源加载不到

• outDir 配置编译存放的目录，默认dist, 变更了 root，不指定就会存放在src/dist下。

• input 为 rollupOptions rollup 配置，定义入口、出口及其他参数。

   build: {
    // ...
    // 指定输出目录
    outDir: resolve(__dirname,'dist'),
    // rollup 配置打包项
    rollupOptions: {
      // ...
      // input:"src/index.js"
      input: {
        main: resolve(__dirname, 'src/index.html'),
        login: resolve(__dirname, 'src/login/index.html')
      }
    },
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

• 访问 public 资源目录地址变更，以前是/public/img/**，现在直接指向二级目录地址/img/**

此处展示调整过的配置，其他配置不在赘述，可查看项目地址

// ...

// config
export default defineConfig(({ command, mode }) => {
  /**
   * command - 命令模式
   * mode - 生产、开发模式
   */

  return {
    const { resolve } = require('path')

    // 项目根目录，index.html 所在的目录
    // 要配置多页面，所以此处更改项目根目录地址，不再是项目根目录
    // 而是指定的目录下， 以便配置多页面index.html入口
    root: resolve(__dirname,'src'),
    // 静态资源服务目录地址
    // 根目录变化，原来的public静态资源目录则需要，指向
    publicDir: resolve(__dirname,'./public'),
    // 存储缓存文件的目录地址
    cacheDir: '',
    //
    resolve: {
      // 设置文件目录别名
      // 根目录地址变更，也需要调整
      alias: {
        '@':  resolve(__dirname,'./src'),
      },
    },
    // ...
    // 构建配置项
    build: {
      // ...
      // 指定输出目录
      outDir: resolve(__dirname,'dist'),
      // 指定静态资源存放目录
      assetsDir: '',
      // 启用、禁用css代码拆分
      cssCodeSplit: true,
      // 构建是否生成source map文件
      sourcemap: 'inline',
      // rollup 配置打包项
      rollupOptions: {
        // ...
        // input:"src/index.js"
        input: {
          main: resolve(__dirname, 'src/index.html'),
          login: resolve(__dirname, 'src/login/index.html')
        }
      },
      // 构建目录自动清除
      emptyOutDir: false,
    },
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

不变更root

如果可以不变更 root，那我们需要更改的配置也比较少，只需要调整input就可以了

    build: {
      // rollup 配置打包项
      rollupOptions: {
        // ...
        // input:"src/index.js"
        input: {
          main: resolve(__dirname, 'src/index.html'),
          login: resolve(__dirname, 'src/login/index.html')
        }
      },
    },
1
2
3
4
5
6
7
8
9
10
11

但是测试多次，都无法跳转到配置的登录页。

遂作罢！！！

访问登录页地址http://127.0.0.1:8081/login/

登录成功后 http://127.0.0.1:8081 就可以正常范文项目了

vite+vue3 模板代码仓库(vite-vue3)[https://gitee.com/ngd_b/vue3-vite]

其他文章：

vite-vue3 开发环境搭建

Vue3 现在有多少种写法?

vue3 sfc 单文件组件中如何书写 JSX 语法？