vite配置多页面入口

最新推荐文章于 2024-09-26 15:11:00 发布

杨扬树

最新推荐文章于 2024-09-26 15:11:00 发布

阅读量4.3k

点赞数

分类专栏： vue3.0+ts+vite 文章标签： vue.js typescript node.js

本文链接：https://blog.csdn.net/qq_23135259/article/details/130510801

版权

vue3.0+ts+vite 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章详细介绍了如何配置Vite.js的项目结构，特别是修改vite.config.ts文件以支持多页面应用。在配置中，修改了根目录、公共静态资源目录、别名以及构建输出和输入目录，同时设置了CSS代码拆分和Sourcemap选项。最终，项目可以在http://127.0.0.1:5173的两个不同路径下运行。

摘要由CSDN通过智能技术生成

1、项目结构：

2、修改vite.config.ts 文件：

完整的vite.config.ts文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';
// import { createHtmlPlugin } from 'vite-plugin-html'
export default defineConfig(({ command, mode }) => {
  /**
   * command - 命令模式
   * mode - 生产、开发模式
   */
  return {
    // 项目根目录，index.html 所在的目录
    // 要配置多页面，所以此处更改项目根目录地址，不再是项目根目录
    // 而是指定的目录下， 以便配置多页面index.html入口
    root: resolve(__dirname, 'src'),
    // 静态资源服务目录地址
    // 根目录变化，原来的public静态资源目录则需要，指向
    publicDir: resolve(__dirname, './public'),
    // 存储缓存文件的目录地址
    cacheDir: '',
    //
    resolve: {
      // 设置文件目录别名
      // 根目录地址变更，也需要调整
      alias: {
        '@': resolve(__dirname, './src'),
      },
    },
    // ...
    // 构建配置项
    build: {
      // ...
      // 指定输出目录
      outDir: resolve(__dirname, 'apply'),
      // 指定静态资源存放目录
      assetsDir: '',
      // 启用、禁用css代码拆分
      cssCodeSplit: true,
      // 构建是否生成source map文件
      sourcemap: 'inline',
      // rollup 配置打包项
      rollupOptions: {
        // 多页面入口配置
        input: {
          apply: resolve(__dirname, 'src/pages/index/index.html'),
          chain: resolve(__dirname, 'src/pages/chain/index.html')
        }
      },
      // 构建目录自动清除
      emptyOutDir: false,
    },
    plugins: [vue()]
  }
})

3、运行地址：

http://127.0.0.1:5173/pages/index/index.html

http://127.0.0.1:5173/pages/chain/index.html