本示例基于vite-plugin-html插件,实现多个独立项目共存,共享组件和依赖,运行、打包互不干扰。 npm create vite@latest 兼容性注意 Vite 需要 Node.js 14.18+、16+版本,有些模板需要更高的版本 虽然创建项目用的14.17.5版本,但是后面运行项目用的18.15.0 HTML模板插件 npm i vite-plugin-html -D #vite.config.t...
这里有个坑是我们必须用编辑器打开dist文件夹,再去访问js,css资源才能够访问到.起初我直接用livesever去打开index.html引入资源时直接404了,可以看到打包后html页面引用资源的路径是/static/xxx,推测这里的问题应该与相对路径有关,有大佬知道的可以详细说说 打包好的dist长这样 三.部署部署选择的是nginx,...
公司前端项目,是由Vite+Vue3+ts搭建的单页面项目,但是随着需求增多,发现越来越多的页面互相之前没有关联关系,耦合度极低,项目逐渐变大后会导致每个独立页面的启动速度慢,打包时间长,而且每次发布打包都会影响线上所有页面(虽然可能代码没改动,但是引用的三方npm包、公共组件等可能会变化),这些都有可能导致线...
页面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'importvuefrom'@vitejs/plugin-vue'importpath, { resolve, join }from'path'importautoprefixerfrom'autoprefixer';importpostCss...
有时候需要登录页、推广页等独立页面和业务 SPA 页分离的情况。尤其是在登录页中使用我觉得是不错的方案。 它可以直接和带有 vue-router、vuex、pinia 的 SPA 应用解耦,避免在登录页调用了一些 SPA 页面初始化行为。 原理 原理上其实也很简单,就是通过 Vite 的多入口、多出口来实现产出多个独立的 HTML 文件。
这个单独拆分出来的配置文件include包含vite.config.ts,说明只是负责编译 vite 的配置文件。 我在根目录新建了一个build文件夹,拆分了plugin的引入和多页面配置,这里红色警告提示要在tsconfig.node.json的include中加入文件 // tsconfig.node.json{"compilerOptions":{"composite":true,"module":"esnext","moduleResolu...
简介: vue3-ts-vite:vue 项目 配置 多页面应用 一、Vue项目,什么是多页面应用 Vue是一种单页面应用程序(SPA)框架,这意味着Vue应用程序通常只有一个HTML页面,而在该页面上进行动态的内容更改,而不是每次都加载新的HTML页面。 但是,有时候我们需要在同一应用程序中拥有多个独立的页面,每个页面都可以单独处理路由...
在Vue3+Vite中实现多页应用(MPA)可以使用Vite提供的多页应用配置。以下是实现步骤: 1、修改vite.config.js文件,使其支持多页应用 import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { resolve } from 'path'; export default defineConfig({ plugins: [vue()], build...
Vue 3 是通过以下几个核心步骤进行打包的:1、使用 Vite 作为构建工具,2、配置 Vue CLI 或自定义 Webpack 配置,3、优化代码分割和懒加载,4、利用 Tree Shaking 减少包体积。在这些步骤中,Vite 作为构建工具的使用是尤为关键的。Vite 是一个新一代前端工具,具有快速的开发服务器启动速度和高效的构建性能,极大地...
有时候需要登录页、推广页等独立页面和业务 SPA 页分离的情况。尤其是在登录页中使用我觉得是不错的方案。 它可以直接和带有 vue-router、vuex、pinia 的 SPA 应用解耦,避免在登录页调用了一些 SPA 页面初始化行为。 原理 原理上其实也很简单,就是通过 Vite 的多入口、多出口来实现产出多个独立的 HTML 文件。