Vite多页面工程,实现模块化打包和模块化运行

Vite多页面工程

使用方案

基于Vue3 Typescript Vite搭建，集成了Eslint Prettier Stylelint来实现自动格式化与修复， 使用Husky lint-staged 的 Git 提交工作流集成，自定义commit-msg来规范Git 提交信息。 使用了ViteImagemin来对静态资源图片进行压缩。使用pnpm来进行包管理。

基于环境

现公司使用的H5项目架构存在一定的问题，单个工程中存在若干个项目，其中的项目有大有小，有的甚至已经废弃，但是每次项目上线或者运行都需要把所有的文件进行打包，包括项目上线也是一样，这是一个很不友好并且影响性能的问题。所以考虑着基于vite搭建一个多页面工程，目的是在一个工程内创建若干个子项目，子项目都可以用工程内公共的模块，但是每个子项目互不干扰，项目运行时仅仅运行运行当前的子项目，打包时也只会打包所选择的子项目，这样节省了打包的时间，同时也避免了项目上线时可能会对其他模块造成影响的风险。

1.项目结构

gitee地址

...
├─public
├─scripts  // 脚本文件 用来进行新建子项目
└─src
    ├─components //公共模块
    ├─Project // 项目列表
    │  ├─pageone // 项目名
    │  │  ├─router // 路由配置目录
    │  │  └─views // 页面列表
    ├─assets // 公共资源
    └─utils // 工具类

2.如何使用

创建子项目

pnpm run new:page
//请输入要生成的'页面名称:页面描述'、会生成在 /src/Project 目录下
pageSix:这是第六个页面

//完成后 会在 scripts/multiPages.json 中生成对应的数据 后期删除需要删除对应的数据来保持一致 内容数据如下：
[
  { "chunk": "pageone", "chunkName": "第一个页面"},
  { "chunk": "pagetwo", "chunkName": "第二个页面" },
  { "chunk": "pagethree", "chunkName": "第三个页面" }
]

运行指定子项目

pnpm run start --config.project=pagethree

// 其中后缀名 config.project是指向pnpm变量传递值，然后在vite.config.ts中可以获取参数来进行打包对应的项目
// pagethree 为项目的名称
// config.project 在pnpm和npm的使用方式不同 在npm中 通过project就可以设置

打包指定子项目

pnpm run build --config.project=pagethree

// 和上面相同

需要注意的是

打包后的dist目录是不同的，关于这一点 后续打包需要上线部署 这一部分需要和运维端对接好，让他们提供按需打包的方式。

...
└─dist
    ├─pagethree // 子项目的打包内容
    │  ├─css 
    │  ├─js 
    │  ├─index.html

多页面的配置

如果需要实现多页面，需要在vite.config.ts中进行配置，配置的区别和webpack还是存在一定差异的

//vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteEslint from 'vite-plugin-eslint' //引入eslint
import viteStylelint from '@amatlash/vite-plugin-stylelint'
import viteImagemin from 'vite-plugin-imagemin' //引入图片压缩插件
import path from 'path'
// 引入多页面配置文件
const project = require('./scripts/multiPages.json')

// 获取是否是生产环境
// const isProduction = process.env.NODE_ENV === 'production'

// 多页面配置开始-------------------------------------- 获取pnpm run dev后缀来运行对应的项目
const npm_config_project = process.env.npm_config_project
let filterProjects = []
if (npm_config_project) {
  // 这一步操作主要是处理要单独打包和单独运行的配置项
  filterProjects = project.filter((ele) => {
    // 过滤出用户输入的单独打包的配置项
    return ele.chunk.toLowerCase() === npm_config_project.toLowerCase()
  })
  console.log(`--------单独构建：${filterProjects[0]['chunkName']}--------`)
} else {
  filterProjects = project
}

/** 多页面配置 */
const multiPages = (p) => {
  const pages = {}
  p.forEach((ele) => {
    const htmlUrl = path.resolve(
      __dirname,
      `src/Project/${ele.chunk}/index.html`
    )
    pages[ele.chunk] = htmlUrl
  })
  return pages
}
/**多页面打包 */
const multiBuild = (p) => {
  const buildOutputConfigs = []
  p.forEach((ele) => {
    // 配置多出口打包
    buildOutputConfigs.push({
      dir: `dist/${ele.chunk}/`,
      assetFileNames: '[ext]/[name]-[hash].[ext]',
      chunkFileNames: 'js/[name]-[hash].js',
      entryFileNames: 'js/[name]-[hash].js'
    })
  })
  return buildOutputConfigs
}
// 多页面配置结束 --------------------------------------
// https://vitejs.dev/config/
export default defineConfig({
  //把root指向/src/Project/，编译时在此目录下编译, build时生成在dist内生成对应的文件
  root: `./src/Project/${filterProjects[0]['chunk']}`,
  //设置静态资源相对路径，index.html和login.html等入口文件的静态资源读取相对路径
  base: './',
  plugins: [
    vue(),
    viteEslint(),
    viteStylelint({ exclude: /node_modules/ }),
    viteImagemin({
      // 无损压缩配置，无损压缩下图片质量不会变差
      optipng: {
        optimizationLevel: 7
      },
      // 有损压缩配置，有损压缩下图片质量可能会变差
      pngquant: {
        quality: [0.8, 0.9]
      },
      // svg 优化
      svgo: {
        plugins: [
          {
            name: 'removeViewBox'
          },
          {
            name: 'removeEmptyAttrs',
            active: false
          }
        ]
      }
    })
  ],
  resolve: {
    alias: {
      '@': path.join(__dirname, './src'),
      '@Project': path.join(__dirname, './src/Project')
    }
  },
  build: {
    rollupOptions: {
      //配置多页应用程序入口文件
      input: multiPages(filterProjects),
      //打包到目标目录
      output: multiBuild(filterProjects)
    }
  },
  server: {
    host: 'localhost', // 指定服务器主机名
    port: 8001, // 指定服务器端口
    open: true, // 在服务器启动时自动在浏览器中打开应用程序
    https: false // 是否开启 https
  }
})

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