位置: IT常识 - 正文

vue3 + vite 多项目多模块打包(vue多模块多项目集成)

编辑:rootadmin
vue3 + vite 多项目多模块打包 vue3 + vite 多项目多模块打包

推荐整理分享vue3 + vite 多项目多模块打包(vue多模块多项目集成),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue多项目集成,vue多个项目,vue项目配置多个环境,vue 多tab,vue 多tab,vue 多个slot,vue 多项目管理,vue多个项目,内容如对您有帮助,希望把文章链接给更多的朋友!

本示例基于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.tsimport {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: '/src/main.ts', template: 'index.html', } ]}export default defineConfig({ base: './', // 方便打包后预览 publicDir: 'public', // 默认 public plugins: [vue(), createHtmlPlugin(htmlParams)], build: { cssCodeSplit: true, emptyOutDir: true, sourcemap: false, assetsDir: 'assets', // 默认 assets outDir: 'dist', // 默认 dist rollupOptions: { input: {}, // input 不用管,插件内会处理 output: { compact: true, entryFileNames: "static/js/[name]-[hash].js", chunkFileNames: "static/js/[name]-[hash].js", assetFileNames: "static/[ext]/[name].[ext]", } } }})

打包一下 验证插件效果

npm run build

目录改造 beijing.html nanjing.htmlsrc - beijing - App.vue - main.ts - nanjing - App.vue - main.tsvue3 + vite 多项目多模块打包(vue多模块多项目集成)

新增文件(项目模板):beijing.html、nanjing.html

# beijing.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/static/imgs/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>北京项目</title> </head> <body> <div id="app"></div> <script type="module" src="/src/beijing/main.ts"></script> </body></html>

nanjing.html内容略(把北京的复制一份)

新增目录及项目文件:beijing/App.vue、beijing/main.ts、nanjing/App.vue、nanjing/main.ts

# beijing/main.tsimport { createApp } from 'vue'import '../style.css'import App from './App.vue'createApp(App).mount('#app')# beijing/App.vue<script setup lang="ts">import HelloWorld from '../components/HelloWorld.vue'</script><template> <div> <img src="/static/imgs/vite.svg" class="logo" alt="Vite logo"/> <img src="../assets/vue.svg" class="logo vue" alt="Vue logo"/> <h1>北京项目</h1> </div> <HelloWorld msg="HelloWorld"/></template>

nanjing/App.vue、nanjing/main.ts 内容略(把北京的复制一份)

注意文件路径,例如:vite.svg、vue.svg、style.css

#vite.config.tsimport {defineConfig} from "vite"import vue from '@vitejs/plugin-vue'import {createHtmlPlugin} from 'vite-plugin-html'const htmlParams = { minify: true, pages: [ { filename: 'beijing', // filename 默认是template文件名,就是beijing.html entry: '/src/beijing/main.ts', template: 'beijing.html', }, { filename: 'nanjing', entry: '/src/nanjing/main.ts', template: 'nanjing.html', }, ]}export default defineConfig({ base: './', // 方便打包后预览 publicDir: 'public', // 默认 public plugins: [vue(), createHtmlPlugin(htmlParams)], build: { cssCodeSplit: true, emptyOutDir: true, sourcemap: false, assetsDir: 'assets', // 默认 assets outDir: 'dist', // 默认 dist rollupOptions: { input: {}, // input 不用管,插件内会处理 output: { compact: true, entryFileNames: "static/js/[name]-[hash].js", chunkFileNames: "static/js/[name]-[hash].js", assetFileNames: "static/[ext]/[name].[ext]", } } }})

打包结果

我这的java项目集成的是FreeMarker, 把项目模板beijing.html改成beijing.ftl,修改文件里对应的静态资源路径, 前端打包之后,把dist下面的文件同步到java项目的static目录。

别名配置

ts 配置,新增项 baseUrl、types、paths

# tsconfig.json{ "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, "module": "ESNext", "moduleResolution": "Node", "strict": true, "jsx": "preserve", "resolveJsonModule": true, "isolatedModules": true, "esModuleInterop": true, "lib": ["ESNext", "DOM"], "skipLibCheck": true, "noEmit": true, "baseUrl": "src", "types": ["vite/client"], "paths": {"@/*": ["./*"]} }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "references": [{ "path": "./tsconfig.node.json" }]}

vite 配置,新增项 resolve.alias

# vite.config.tsimport {resolve} from "path";import {defineConfig} from "vite"import vue from '@vitejs/plugin-vue'import {createHtmlPlugin} from 'vite-plugin-html'const htmlParams = { minify: true, pages: [ { filename: 'beijing', // filename 默认是template文件名,就是beijing.html entry: '/src/beijing/main.ts', template: 'beijing.html', }, { filename: 'nanjing', entry: '/src/nanjing/main.ts', template: 'nanjing.html', }, ]}export default defineConfig({ base: './', // 方便打包后预览 publicDir: 'public', // 默认 public plugins: [vue(), createHtmlPlugin(htmlParams)], resolve: { alias: { '@': resolve(__dirname, 'src'), } }, build: { cssCodeSplit: true, emptyOutDir: true, sourcemap: false, assetsDir: 'assets', // 默认 assets outDir: 'dist', // 默认 dist rollupOptions: { input: {}, // input 不用管,插件内会处理 output: { compact: true, entryFileNames: "static/js/[name]-[hash].js", chunkFileNames: "static/js/[name]-[hash].js", assetFileNames: "static/[ext]/[name].[ext]", } } }})

项目里面,引入文件:"../assets/vue.svg"、"../components/HelloWorld.vue" 改为 "@/assets/vue.svg"、"@/components/HelloWorld.vue"

本文链接地址:https://www.jiuchutong.com/zhishi/283976.html 转载请保留说明!

上一篇:最早的塞班手机是什么(第一部塞班手机)

下一篇:玉树的养殖方法和注意事项(盆栽玉树的养殖方法)

  • 一次性劳务所得税怎么算
  • 小规模纳税人广告费扣除标准
  • 小规模纳税人增值税申报流程
  • 车船税缴纳的相关知识?
  • 上市公司收购其他公司要多久
  • 天猫收取的佣金开具的技术服务发票会计分录
  • 什么情况下可以报警
  • 销售自己使用过的物品免税吗
  • 应计入企业存货成本有哪些
  • 视同销售收入计入会计利润吗
  • 出售股票公允价值变动在借方
  • 购买房产怎么确认收入
  • 已认证的发票作废进项税转出账务处理
  • 佣金可以直接转到个人账户吗
  • 所得税预缴申报表利润
  • 在PDF里怎么将A4缩小转换为一半打印出来
  • 光伏安装工程公司有哪些
  • 小规模纳税人的增值税计入成本吗
  • 其他专项收入怎么做账
  • 商贸流通企业的构成
  • 电脑qq音乐声音小怎么回事
  • 鸿蒙系统怎么同步数据
  • 预收账款可以挂账多久要交税
  • gsicon.exe是什么进程 作用是什么 gsicon进程查询
  • 静默安装命令
  • erl.exe是什么进程
  • 项目设计费怎么计算
  • PHP:preg_match()的用法_PCRE正则函数
  • 长期借款和短期借款会计分录的区别
  • 业务招待费税前扣除标准按照发生额的60%扣除
  • php教程100
  • 稳岗补贴需要缴纳什么税
  • 应收的罚款收入计入什么科目
  • 税收滞纳金可以抵税吗
  • 凯丽温泉可以做spa
  • php自动编号
  • 企业所得税的计提和缴纳分录
  • 开展党建系列活动
  • zabbix agent启动命令
  • 银行结算方式有哪几种方式?其具体内容是什么?
  • python怎么安装lxml库
  • idea2021版本创建项目
  • 特征融合add
  • 自然人税收管理系统官网
  • 以前年度应交税费调账
  • sql语句优化实例
  • c语言缺省值
  • 其他业务收入与营业外收入
  • 让渡资产使用权属于收入吗
  • 调整汇兑损益的摘要怎么写?
  • 住房租金专项附加扣除
  • 通过SQLServer 2008 操作 MySQL的方法
  • 超市购物 发票
  • 公司购买新车怎么入账
  • 盘亏的主要原因是什么
  • 交耕地占用税如何交
  • 差旅费出差补助标准
  • 超期未备案可以投诉么
  • 申请国家知识产权的条件
  • 快递费专票可以报销吗
  • 暂估入库一直没有发票
  • 给别人的借款怎么记账
  • sqlserver如何设置主键
  • win键有啥用
  • centos的top命令
  • win7切换输入法的快捷键怎么设置
  • ubuntu系统怎么用
  • pap是什么文件
  • windows预览0x80072ee2
  • win8.1如何快速启动
  • cocos2dx性能优化与包体优化
  • 编写程序实现将两个文本文件的内容合并
  • android解析
  • [置顶] 汉诺塔的原理剖析以及递归的解决办法
  • javascript 对象
  • 用javascript
  • 国家税务局发票查验平台查验官网
  • 银行缴纳印花税存在问题和建议
  • 乌鲁木齐税收政策
  • 个人工资所得税缴纳标准2023年
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设