vue3+vite配置多页面

通过配置多页面应用，从而将给子模块依赖分隔开各自加载，可以减少初始资源的请求，加快页面的访问速度。
比如我们有很多H5页面，并且相互独立，比如报修，购卡，计价规则等等，那我们如果访问购卡，只需要通过/buyCards/进行访问，不需要初始资源的加载支持。

目录结构

├── build       打包后的静态资源目录
├── mock            mock服务 todo
└── src             项目资源目录
    └── assets          项目静态资源
    ├── common          全局方法公共库
        └── utils.ts            全局公共方法
        └── constants.ts        全局公共常量
    ├── components      公共组件
    ├── interface       公共模型
    ├── pages           页面模块
        ├── xxx         页面模块A
            ├── apis            接口定义
            ├── components      页面组件
            └── router          路由配置
            └── store           store配置
            └── common           模块公共库
                └── utils.ts           模块公共工具方法
                └── constants.ts        模块常量
                └── eventMap.ts         模块埋点枚举
            └── views           模块页面
            └── App.vue         入口根节点
            └── index.html      入口页面
            └── main.ts         入口页面文件
        ├── xxx         页面模块B
            ├── apis            接口定义
            ├── components      页面组件
            └── router          路由配置
            └── store           store配置
            └── common           模块公共库
                └── utils.ts           模块公共工具方法
                └── constants.ts        模块常量
                └── eventMap.ts         模块埋点枚举
            └── views           模块页面
            └── App.vue         入口根节点
            └── index.html      入口页面
            └── main.ts         入口页面文件
        ├── xxx         初始化入口文件
    ├── style                   公共样式模块
    ├── types                   依赖库类型定义
    └── .browserslistrc         浏览器兼容配置
    └── .eslintignore           eslint忽略文件配置
    └── .eslintrc.cjs           eslint规则配置
    └── .gitignore              gitignore配置
    └── .prettierignore         prettier忽略文件配置
    └── .prettierrrc.js         prettier文件配置
    └── .vue.config.ts          项目打包配置文件

src/index.html是默认启动初始化项目时候的一个入口文件，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始化页面路由</title>
</head>
<body>
  <p><a href="">重定向页面</a></p>
<script>
</script>
</body>
</html>

vite配置多页面 vite.config

修改root

修改root参数为多页面的根目录：根据不同的目录结构而修改
● 类型： string
● 默认： process.cwd()
项目根目录（index.html 文件所在的位置）。可以是一个绝对路径，或者一个相对于该配置文件本身的相对路径。
根据上述目录工程里，所以修改为root: './src/pages'

修改base

base修改为'/'，避免后续打包路径有问题
● 类型： string
● 默认： /
开发或生产环境服务的公共基础路径。合法的值包括以下几种：
● 绝对 URL 路径名，例如 /foo/
● 完整的 URL，例如 https://foo.com/
● 空字符串或 ./（用于嵌入形式的开发）

修改build.outDir

outDir: resolve(process.cwd(), 'build'), // 指定输出路径（相对于项目根目录)
● 类型： string
● 默认： dist
指定输出路径（相对于项目根目录).

修改rollupOptions.input

rollupOptions.input配置多个页面的输入，可以动态根据/pages文件夹下读取，可参考如下代码

const getEntryPath = (globPath: string) => {
  const pageEntry = {}
  glob.sync("./src/pages/**/index.html").forEach((entry: string) => {
    const pathArr: string = entry.split("/");
    const name: string = pathArr[pathArr.length - 2];
    pageEntry[name] = join(process.cwd(), `/src/pages/${name}/index.html`)
  })
  delete pageEntry.pages
  delete pageEntry.index //此处是为了删除初始化页面，这个可根据页面需要自行决定
  return pageEntry // 整体效果如下图
}

// 自定义底层的 Rollup 打包配置
rollupOptions: {
  input: getEntryPath()
}

访问页面

页面A：http://127.0.0.1:8080/newWallet/index.html#/
页面B：http://127.0.0.1:8080/demo/index.html#/

以下是完整vite.config 仅供参考

import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path, { resolve, join } from 'path'
import autoprefixer from 'autoprefixer';
import postCssPxToRem from 'postcss-pxtorem';
import AutoImport from "unplugin-auto-import/vite"
import glob from "glob";
import eslintPlugin from 'vite-plugin-eslint' //导入包

const assetsPath = (path: string) => {
  return join('static', path)
}

const getEntryPath = (globPath: string) => {
  const pageEntry = {}
  glob.sync("./src/pages/**/index.html").forEach((entry: string) => {
    const pathArr: string = entry.split("/");
    const name: string = pathArr[pathArr.length - 2];
    pageEntry[name] = join(process.cwd(), `/src/pages/${name}/index.html`)
  })
  delete pageEntry.pages
  delete pageEntry.index
  console.log(pageEntry)
  return pageEntry
}

export default defineConfig({
  root: './src/pages',
  base: '/',     
  define: {},
  plugins: [
    vue(),
    AutoImport ({
      imports: ["vue", "vue-router", "pinia"], // 自动导入vue和vue-router相关函数(只有组件里哦，ts或js文件里面不行～～～)
      dts: 'types/auto-import.d.ts' //生成全局引入的文件
    }),
    // 增加下面的配置项,这样在运行时就能检查eslint规范
    eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue'],
      exclude: ['./node_modules/**', './src/types/**'],
      cache: false
    }),
  ],    
  resolve: { 
    alias: [
      {
        find: "@",
        replacement: resolve(__dirname, "src")
      }
    ] 
  },  
  css: {
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'],
        }),
        postCssPxToRem({
          // 自适应，px>rem转换
          rootValue: 75, // 75表示750设计稿，37.5表示375设计稿
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          selectorBlackList: ['norem'], // 过滤掉norem-开头的class，不进行rem转换
        }),
      ],
    }
  },
  server: {
    host: 'localhost',        // 指定服务器应该监听哪个 IP 地址
    port: 8080,               // 端口
    strictPort: false, // 若端口已被占用,尝试下移一格端口
    open: true,   
    proxy: {                
      '/gateway': {
        target: process.env.VITE_API_URL || 'https://pinzhi.didichuxing.com',
        ws: true,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  build: {
    outDir: resolve(process.cwd(),'build'),// 指定输出路径（相对于 项目根目录)
    sourcemap: false, // 构建后是否生成 source map 文件
    chunkSizeWarningLimit: 1500, // 规定触发警告的 chunk(文件块) 大小
    assetsDir: 'static',
    minify: 'esbuild',
    rollupOptions: {  // 自定义底层的 Rollup 打包配置
      input: getEntryPath(), 
      output: {
        entryFileNames: assetsPath('js/[name].js'),
        chunkFileNames: assetsPath('js/[name].js'),
        assetFileNames: assetsPath('css/[name].[ext]'),
        compact: true,
        manualChunks: (id: string) => {
          if(id.includes("node_modules")) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString(); // 拆分多个vendors
          }
        }
      },
    },
    emptyOutDir: true,
  }
})

posted @ 2023-01-06 16:29 清风白水阅读(8677) 评论(2) 编辑收藏举报

刷新页面返回顶部

清风白水