页面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...
公司前端项目,是由Vite+Vue3+ts搭建的单页面项目,但是随着需求增多,发现越来越多的页面互相之前没有关联关系,耦合度极低,项目逐渐变大后会导致每个独立页面的启动速度慢,打包时间长,而且每次发布打包都会影响线上所有页面(虽然可能代码没改动,但是引用的三方npm包、公共组件等可能会变化),这些都有可能导致线...
这里有个坑是我们必须用编辑器打开dist文件夹,再去访问js,css资源才能够访问到.起初我直接用livesever去打开index.html引入资源时直接404了,可以看到打包后html页面引用资源的路径是/static/xxx,推测这里的问题应该与相对路径有关,有大佬知道的可以详细说说 打包好的dist长这样 三.部署部署选择的是nginx,...
npm i vite-plugin-html -D #vite.config.ts import {defineConfig} from"vite" import vue from'@vitejs/plugin-vue' import {createHtmlPlugin} from'vite-plugin-html' const htmlParams = { minify:true, pages: [ { filename:'index', // filename 默认是template文件名,就是index.html entry:'/s...
在Vite 3和Vue 3项目中配置多入口打包,可以按照以下步骤进行: 1. 理解Vite 3和Vue 3的基本配置 确保你已经安装并配置了Vite 3和Vue 3的基本项目。这通常包括创建一个新的Vite项目,并安装Vue 3依赖。 2. 创建多个入口文件 在你的项目根目录下创建多个入口文件,例如main.js和admin.js。这些文件将作为你不同...
这个单独拆分出来的配置文件include包含vite.config.ts,说明只是负责编译 vite 的配置文件。 我在根目录新建了一个build文件夹,拆分了plugin的引入和多页面配置,这里红色警告提示要在tsconfig.node.json的include中加入文件 // tsconfig.node.json{"compilerOptions":{"composite":true,"module":"esnext","moduleResolu...
Vite项目中src目录基本上存放的绝大多数都是vue组件文件,两者分开会使得结构清晰 若把html和入口文件也放在src中,访问子页面的时候路径会很长,打包后也很难对应 当然,这里也只是我的看法,大家可以根据自己的习惯进行组织,多页应用的配置的目录并非是死的,毕竟知道了页面加载的方式,我们也很容易配置多页应用了!
在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...
pnpm create vite my-vue-app --template vue 1. 2. 3. 4. 5. 6. 7. 8. 查看create-vite以获取每个模板的更多细节:vanilla,vanilla-ts,vue,vue-ts,react,react-ts,react-swc,react-swc-ts,preact,preact-ts,lit,lit-ts,svelte,svelte-ts。