vite多页面配置项目实战
目录
- 目录结构
- 多页面使用时，vite配置项中注意点
- vite.config.js 配置，仅供参考
- 访问
- 总结
最近有多页面项目需要重构，就想试试使用vite，但是网上很多方法不太全面踩了不少的坑，网上的多页面配置方案也不少，我只给出了我成功配置并在使用的方案
目录结构
{
dist: // 存放打包后的文件,
node_modules: ,
src: {
assets: // 一些静态文件,
components: // 公用组件,
index: { // 页面1
index.html,
main.js,
App.vue,
...
},
page: { // 页面2
index.html,
main.js,
App.vue,
...
},
...
index.html // 用于页面初始进入时重定向
},
package.json: ,
vite.config.js: // 配置文件
}
Tips：在src中放一个index.html是为了编译或打包后，输入localhost:3000/能够直接跳转到需要展示的页面，而不是出现文件目录或空白页面，对应代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vite多页面</title>
</head>
<body>
<script>
window.location.href = 'index/index.html' // 需要重定向的页面
</script>
</body>
</html>
多页面使用时，vite配置项中注意点
- 修改root参数为多页面的根目录：./src/，根据不同目录结构而修改
- 配置base参数为/，不然打包后js文件的访问路径会出问题
- 将build.outDir原输入路径dist改为../dist，根据root参数配置层级不同而对应修改
- rollupOptions.input中配置多个页面的输入，以下为我使用的配置项
{
admin: path.resolve(__dirname, 'src/index.html'), // 用于页面重定向
index: path.resolve(__dirname, 'src/index/index.html'), // 页面一
page: path.resolve(__dirname, 'src/page/index.html'), // 页面二
}
vite.config.js 配置，仅供参考
直接上我的配置，东西有点多，仅供参考
import {
defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
// 服务
server: {
// 服务器主机名
host: '0.0.0.0',
// 端口号
port: 3000,
// 设为 true 时若端口已被占用则会直接退出，
// 而不是尝试下移一格端口
strictPort: false,
// http.createServer() 配置项
// https: '',
proxy: {
'/api': {
target: 'http://...............',
changeOrigin: true,
rewrite: (path) => {
return path.replace(/^\/api/, '')
}
}
},
// 开发服务器配置 CORS
// boolean | CorsOptions
cors: {},
// 设置为 true 强制使依赖构建
// force: true,
// 禁用或配置HMR连接
hmr: {},
// 传递给 chokidar 的文件系统监视器选项
watch: {}
},
// 项目根目录
// root: process.cwd(),
root: './src/',
// 项目部署的基础路径
base: '/',
// 环境配置
mode: 'development',
// 全局变量替换 Record<string, string>
define: {},
// 插件
plugins: [vue()],
// 静态资源服务文件夹
publicDir: 'public',
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'components': path.resolve(__dirname, 'src/components')
},
dedupe: [],
// 情景导出package.json 配置中的 exports 字段
conditions: [],
// 解析package.json 中的字段
mainFields: ['module', 'jsnext:main', 'jsnext'],
// 导入时想要省略的扩展名列表
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
css: {
// 配置css modules 的行为， 选项被传递给postcss-modules
modules: {},
// PostCSS 配置（格式同postcss.config.js）
// postcss-load-config 的插件配置
postcss: {},
// 指定传递给 CSS 预处理器的选项
preprocessorOptions: {
}
},
json: {
// 是否支持从 .json 文件中进行按名导入
namedExports: true,
// 若设置为 true, 导入的 JSON 会被转换为 export default JSON.parse("...") 会比转译成对象字面量性能更好
// 尤其是当 JSON 文件较大时
// 开启此项， 则会禁用按名导入
stringify: false
},
// 继承自 esbuild 转换选项， 最常见的用例是自定义 JSX
esbuild: {
jsxFactory: 'h',
jsxFragment: 'Fragment',
jsxInject: `import React from 'react'`
},
// 静态资源处理 字符串 || 正则表达式
assetsInclude: '',
// 调整控制台输出的级别 'info' | 'warn' | 'error' | 'silent'
logLevel: 'info',
// 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息
clearScreen: true,
build: {
// 浏览器兼容性 ‘esnext' | 'modules'
target: 'modules',
//输出路径
outDir: '../dist',
// 生成静态资源的存放路径
assetsDir: '../assets',
// 小于此阈值的导入或引用资源将内联为 base64 编码， 以避免额外的http请求， 设置为 0, 可以完全禁用此项，
assetsInlineLimit: 4096,
// 启动 / 禁用 CSS 代码拆分
cssCodeSplit: true,
// 构建后是否生成 soutrce map 文件
sourcemap: false,
// 自定义底层的 Rollup 打包配置
rollupOptions: {
input: {
admin: path.resolve(__dirname, 'src/index.html'),
page: path.resolve(__dirname, 'src/page/index.html'),
index: path.resolve(__dirname, 'src/index/index.html'),
},
output: {
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
}
},
// @rollup/plugin-commonjs 插件的选项
commonjsOptions: {},
// 构建的库
// lib: { entry: string, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string },
// 当设置为 true, 构建后将会生成 manifest.json 文件
manifest: false,
// 设置为 false 可以禁用最小化混淆
// 或是用来指定是应用哪种混淆器
// boolean | 'terser' | 'esbuild'
minify: 'terser',
// 传递给 Terser 的更多 minify 选项
terserOptions: {},
// 设置为false 来禁用将构建好的文件写入磁盘
write: true,
// 默认情况下 若 outDir 在 root 目录下， 则 Vite 会在构建时清空该目录。
emptyOutDir: true,
// 启用 / 禁用 brotli 压缩大小报告
brotliSize: false,
// chunk 大小警告的限制
chunkSizeWarningLimit: 500
}
})
访问
页面一：http://localhost:3000/index/index.html
页面二：http://localhost:3000/page/index.html
总结
到此这篇关于vite多页面配置的文章就介绍到这了,更多相关vite多页面配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
详解Vite的新体验
什么是Vite?(是前端新玩具) Vite是一个web开发构建工具,它通过本机 ES 模块导入在开发过程中更新代码,达到快速更新的目的. 特点 超快的冷服务器启动 即时的模块更新 真正的按需编译 更小的打包体积 开始使用 Vue用户注意:Vite当前仅适用于Vue3.x.这也意味着您不能使用尚未与Vue 3兼容的库. 安装 npm init vite-app <项目名称> cd <项目名称> npm install npm run dev ## 执行完以上命令,就意味着你的vue3
-
Vite创建项目的实现步骤
目录 前言 yarn create 做了什么 源码解析 项目依赖 模版配置 工具函数 copy copyDir emptyDir 核心函数 命令行交互并创建文件夹 写入文件 小结 前言 随着 Vite2 的发布并日趋稳定,现在越来越多的项目开始尝试使用它.我们使用 Vite 是一般会用下面这些命令去创建一个项目: // 使用 npm npm init @vitejs/app // 使用 yarn yarn create @vitejs/app // 想指定项目名称和使用某个特定框架的模版时,可以
-
Vite和Vue CLI的优劣
Vue 生态系统中有一个名为 Vite 的新构建工具,它的开发服务器比 Vue CLI 快 10-100 倍. 这是否意味着 Vue CLI 已经过时了?在本文中,我将比较这两种构建工具,并说明它们的优缺点,以便你可以决定哪一种适合你的下一个项目. Vue CLI 概述 大多数 Vue 开发人员都知道,Vue CLI 是使用标准构建工具和最佳实践配置快速建立基于 Vue 的项目的不可或缺的工具. 其主要功能包括: 工程脚手架 带热模块重载的开发服务器 插件系统 用户界面 在本讨论中需要注意的是,
-
学习Vite的原理
目录 1. 概述 2. 实现静态测试服务器 3. 处理第三方模块 4. 单文件组件处理 1. 概述 Vite是一个更轻.更快的web应用开发工具,面向现代浏览器.底层基于ECMAScript标准原生模块系统ES Module实现.他的出现是为了解决webpack冷启动时间过长以及Webpack HMR热更新反应速度慢等问题. 默认情况下Vite创建的项目是一个普通的Vue3应用,相比基于Vue-cli创建的应用少了很多配置文件和依赖. Vite创建的项目所需要的开发依赖非常少,只有Vite和@v
-
vite2.0 踩坑实录
目录 vite项目构建优化 其它 最后 算是对上一篇的补充,记录了一些在配置项目中遇到的问题,希望对大家能有所帮助- vite项目构建优化 路由动态导入 经过rollup的构建,动态导入的文件将会生成异步的chunk文件,在我们访问项目的时候按需加载,极大的提升应用的加载速度 import Home from '@/views/home/index.vue' import Layout from '@/components/Layout.vue' const routes: Array<Rout
-
vite多页面配置项目实战
目录 目录结构 多页面使用时,vite配置项中注意点 vite.config.js 配置,仅供参考 访问 总结 最近有多页面项目需要重构,就想试试使用vite,但是网上很多方法不太全面踩了不少的坑,网上的多页面配置方案也不少,我只给出了我成功配置并在使用的方案 目录结构 { dist: // 存放打包后的文件, node_modules: , src: { assets: // 一些静态文件, components: // 公用组件, index: { // 页面1 index.html, ma
-
Vite多环境配置项目高定制化能力详解
目录 业务背景 多环境场景的业务形态 Vite多环境方案实现 多模式文件配置 自定义环境变量 Vite默认环境变量 通过插件透传环境变量 客户端环境差异定制 效果图 解决的业务场景思考 业务背景 近些年来,随着前端工程架构发展,使得前端项目中也能拥有如后端工程的模块能力.正所谓 “能力(越)越大(来),责任(越)越大(卷)”,现在的前端工程不仅仅要满足业务需求,还伴随更多复杂的环境适配问题,例如: api请求的域名会根据不同环境而不同: 线上环境和测试环境在打包策略有所不同「如线上要隔离sour
-
vue项目添加多页面配置的步骤详解
公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置.看了很多 vue多页面配置 的文章,基本都是在初始化时就配置了多页面.而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的. 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加.这里做下记录.总结,方便以后复用.如果还能有幸帮助到有同样需求的童鞋的话,那就更好了. 实现步骤 1.添加新增入口相关文件; 2.使用变量维护多入口: 3.开发环境读
-
vite2.0+vue3移动端项目实战详解
一.涉及技术点 vite版本 vue3 ts 集成路由 集成vuex 集成axios 配置Vant3 移动端适配 请求代理 二.步骤 vite+ts+vue3只需要一行命令 npm init @vitejs/app my-vue-app --template vue-ts 配置路由 npm install vue-router@4 --save 在src下新建router目录,新建index.ts文件 import { createRouter, createWebHashHistory, Ro
-
Spring框架web项目实战全代码分享
以下是一个最简单的示例 1.新建一个标准的javaweb项目 2.导入spring所需的一些基本的jar包 3.配置web.xml文件 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/
-
Spring Boot集成Swagger2项目实战
一.Swagger简介 上一篇文章中我们介绍了Spring Boot对Restful的支持,这篇文章我们继续讨论这个话题,不过,我们这里不再讨论Restful API如何实现,而是讨论Restful API文档的维护问题. 在日常的工作中,我们往往需要给前端(WEB端.IOS.Android)或者第三方提供接口,这个时候我们就需要给他们提供一份详细的API说明文档.但维护一份详细的文档可不是一件简单的事情.首先,编写一份详细的文档本身就是一件很费时费力的事情,另一方面,由于代码和文档是分离的,所
-
vue-router项目实战总结篇
今天来谈谈vue项目{vue,vue-router,component}三大神将之一的vue-router.作为我们前后端分离很重要的实践之一,router帮我们完成了SPA应用间的页面跳转. 并且,配合axios这样的第三方库,我们可以实现配合后台接口的拦截器功能. 对于一个小型项目而言,router这个文件夹里面就包含了一个router.js就足够了, 但是,当我们的页面比较多的时候,我们就需要分出两个文件出来:一个定义我们的路由和组件,另一个实例化组件,并将路由挂载到vue的实例上. 基本
-
vue项目实战总结篇
这篇文章把小编前段时间做的vue项目,做个完整的总结,具体内容请参考本文. 这次算是详细总结,会从项目的搭建,一直到最后的服务器上部署. 废话不多说了.干货直接上. 一. 必须node环境, 这次就不写node环境的安装了.过两天我会写个node环境的安装随笔. 二. node环境配好后.开整vue. 1. 安装vue脚手架. npm install -g vue-cli 2. 用脚手架搭项目(只是一行命令) vue init webpack-simple (项目名字) 或 vue init w
-
Android 项目实战之头像选择功能
一.图片选择 1.1 目标 1.实现如图所示功能:能够出现相册和相机选项 2.能够对选择的图片进行裁剪 1.2 功能实现 1.2.1 Intent工具类封装 封装图片选择和图片裁剪的工具类 /** * 选择图片(从相册或相机) * @param uri 相机存储uri * @return */ public static Intent getPhotoSelectIntent(Uri uri){ Intent take = new Intent(MediaStore.ACTION_IMAGE_C
-
Scrapy项目实战之爬取某社区用户详情
本文介绍了Scrapy项目实战之爬取某社区用户详情,分享给大家,具有如下: get_cookies.py from selenium import webdriver from pymongo import MongoClient from scrapy.crawler import overridden_settings # from segmentfault import settings import time import settings class GetCookies(object