vue3+vite配置多页面的示例代码

更新时间：2023年06月16日 14:40:33 作者：清风白水

通过配置多页面应用，从而将给子模块依赖分隔开各自加载，可以减少初始资源的请求，加快页面的访问速度，这篇文章主要介绍了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,
  }
})

到此这篇关于vue3+vite配置多页面的文章就介绍到这了,更多相关vue3 vite配置多页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue 的 Render 函数
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。下面就和小编一起来学习下面文章内容吧
2021-09-09
使用Vue3创建多布局系统的三种方法
布局是中大型网站或应用的基础,假设你正在创建一个网页应用,它包括主页、营销页面和应用页面,你不会想要为每一页重复所有的工作,对吧,与Nuxt不同,Vue 3并没有内置的布局系统,但是别担心,这里将向你展示3种简单的方法来实现这一点,需要的朋友可以参考下
2023-08-08
Vue3中操作dom的四种方式总结(建议收藏!)
VUE是通过传递一些配置给Vue对象和页面中引用插值表达式来操作DOM的,下面这篇文章主要给大家介绍了关于Vue3中操作dom的四种方式总结,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-12-12
vue 里面的 $forceUpdate() 强制实例重新渲染操作
这篇文章主要介绍了vue 里面的 $forceUpdate() 强制实例重新渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue引入js数字小键盘的实现代码
这篇文章主要介绍了vue引入js数字小键盘的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2018-05-05
vue3使用高德地图,自定义点标记、默认点聚合样式、点击点标记获取信息
这篇文章主要介绍了vue3使用高德地图,自定义点标记、默认点聚合样式、点击点标记获取信息的相关知识,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-01-01
Vue自嵌套树组件使用方法详解
这篇文章主要为大家详细介绍了Vue自嵌套树组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
vue实现移动端适方案的完整步骤
现在的手机五花八门,造就了移动端窗口分辨率繁多的局面,在不同分辨率的屏幕下保持与UI图一致的效果,就成了让前端不得不头疼的问题,下面这篇文章主要给大家介绍了vue实现移动端适方案的相关资料,需要的朋友可以参考下
2022-10-10
vue+element+Java实现批量删除功能
这篇文章主要介绍了vue+element+Java实现批量删除功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
vue导入.md文件的步骤（markdown转HTML）
这篇文章主要介绍了vue导入.md文件的步骤（markdown转HTML），帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-12-12