vue3+vite配置多页面的示例代码
作者：清风白水
通过配置多页面应用，从而将给子模块依赖分隔开各自加载，可以减少初始资源的请求，加快页面的访问速度，这篇文章主要介绍了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配置多页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！