vue3+vite+nodejs,通过接口的形式请求后端打包(可打包全部或指定打包组件)

项目地址https://gitee.com/sybb011016/test_build

打包通过按钮的形式请求接口,让后端进行打包,后端使用express-generator搭建模版。前端项目就在npm init vue@latest基础上添加了路由
在这里插入图片描述
如果只想打包AboutView组件,首先修改后端接口。

//打包的测试接口
router.get("/build", function (req, res) {//打包的文件路径const frontendProjectPath = "E:\\BaiduNetdiskDownload\\Vue.js\\vue_build";const component = req.query.component || ""; //传入的参数//根据参数决定打包指定目录还是全部打包 cross-env需要前端下载,运行的时候动态设置环境变量const buildCommand = component? `cross-env BUILD_COMPONENT=${component} npm run build`: `npm run build`;exec(buildCommand, { cwd: frontendProjectPath }, (err, stdout, stderr) => {if (err) {console.error(`exec error: ${err}`);return res.status(500).send(`Error during build: ${err.message}`);}console.log(`stdout: ${stdout}`);console.error(`stderr: ${stderr}`);res.send("Build completed successfully");});
});

前端部分接口如下

export const buildAPI = (comp) => {return request({url: "/build",method: "GET",params: {component: comp,},});
};
let res = await buildAPI("About");

修改vite.config.ts配置

export default defineConfig(({ command, mode }) => {//后端接口执行的时候会设置环境变量const input = process.env.BUILD_COMPONENT? path.resolve(__dirname,`src/views/${process.env.BUILD_COMPONENT}View.vue`): path.resolve(__dirname, "index.html");return {....build: {rollupOptions: {input,},},};
});

在这里插入图片描述
在这里插入图片描述
上面只是打包aboutview相关的js和css,但是并没有html查看,现在为aboutview添加一个html和js作为入口文件用于汇众所有的相关的数据。
在这里插入图片描述
在这里插入图片描述
修改vite.config.ts文件内容,下面插件的功能主要是为了修改打包后的入口文件名为index。base: "./"该属性必须添加,否则打包后的目录进行本地预览会显示文件的情况,建议也把重命名的方法添加上,否则刷新可能还是会出现本地文件夹的情况

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "node:path";
import { fileURLToPath, URL } from "node:url";
import fs from "fs/promises";//重命名打包后的about-view.html文件为index.html
const renamePlugin = (originalName, newName) => {return {name: "rename-output-html",closeBundle: async () => {const distPath = path.resolve(__dirname, "dist");const originalPath = path.join(distPath, originalName);const newPath = path.join(distPath, newName);try {await fs.rename(originalPath, newPath);console.log(`Renamed ${originalName} to ${newName}`);} catch (err) {console.error(`Failed to rename ${originalName} to ${newName}:`, err);}},};
};export default defineConfig(() => {// 检测是否设置了环境变量BUILD_COMPONENTconst isComponentBuild = process.env.BUILD_COMPONENT;return {.....base: "./",plugins: [vue(), renamePlugin("about-view.html", "index.html")],build: {rollupOptions: {input:isComponentBuild == "About"? path.resolve(__dirname, "about-view.html"): path.resolve(__dirname, "index.html"),output: {entryFileNames: "assets/[name]-[hash].js", //打包后的index [name]代表使用组件原有名字 [hash]代表hash随机值chunkFileNames: "assets/[name]-[hash].js", //打包后各个组件名的jsassetFileNames: "assets/[name]-[hash].[ext]", //打包后各个组件的css},},outDir: "dist",},};
});

不使用插件
在这里插入图片描述
使用插件
在这里插入图片描述

现在我们添加单独的路由模块(这里假设我们的AboutView中需要读取router.params中的某属性),因此在单独打包之前需要在AboutView.js中创建并引入路由模块,注意这里需要配置单独的路由地址。

import { createApp } from "vue";
import AboutView from "./AboutView.vue";import { createRouter, createWebHistory } from "vue-router";const router = createRouter({history: createWebHistory(),routes: [{path: "/about",name: "about",component: AboutView,},],
});createApp(AboutView).use(router).mount("#app");

模拟请求传参返回随机数更新标题。这里route.params.id只是随便模拟的东西,无值,主要是验证route非空,未单独引入use(router)的情况下读取未undefined。

const route = useRoute();
const title = ref("This is an about page");
onMounted(() => {console.log(route);getDataAPI(route.params.id).then((res) => {title.value = res.data.title;});
});

然后将AboutView的文件单独打包,这里直接部署到宝塔的本地环境中。需要修改一些nginx的参数。文件上传到如下结构。
在这里插入图片描述
在这里插入图片描述
配置nginx

location / { try_files $uri $uri/ /index.html last;index index.html; 
} 
location /api {proxy_pass http://127.0.0.1:3001;rewrite ^/api/(.*)$ /$1 break;
}//下面选择性添加add_header 'Access-Control-Allow-Origin' '*' always; #允许来自所有的访问地址 add_header 'Access-Control-Allow-Credentials' 'true' always; #允许来自所有的访问地址 add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, token, platform' always; add_header 'Access-Control-Allow-Methods' 'GET,POST,PUT,DELETE,HEAD,OPTIONS' always; #允许来自所有的访问地址

运行单独打包的AboutView
在这里插入图片描述
可以正确访问接受数据更新
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/36254.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Open3D (C++) 点云旋转至主成分空间

目录 一、算法原理二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT。 一、算法原理 首先使用主成分分析法计算出点云的特征值与特征向量,然后根据点云的特征向量计算出点云与主成分空间之间的…

CocosCreator构建IOS教程

CocosCreator构建IOS教程 添加include: Header Search Paths:拖拽include过来 添加SoundEngine: Header Search Paths: 把SoundEngine POSIX Common 三个文件夹拖拽到里面去

Params(M), Multi-Adds (G),FLOPS之间的区别

参数数量(Params) 定义: 参数数量指的是模型中所有可训练参数的总数。这些参数包括权重和偏置项等 计算方式: 对于每一层神经网络,参数数量的计算方式如下: 全连接层(Fully Connected Layer&…

探索生成对抗网络(GANs)的新领域:创新应用与挑战

生成对抗网络(GANs)自2014年提出以来,已成为深度学习领域的一个重要分支。本文旨在探讨GANs在传统图像生成之外的新应用领域,包括艺术创作、虚拟现实、个性化推荐和生物信息学,并分析其面临的挑战和未来发展趋势。 关…

探讨公共表表达式(CTE)对对象关系映射(ORM)的影响:性能优化与最佳实践

在现代应用程序开发中,数据库查询和数据处理是不可或缺的一部分。为了提高开发效率和代码可维护性,ORM(对象关系映射)被广泛应用。然而,随着数据复杂度的增加,单纯依靠ORM进行复杂查询可能会导致性能瓶颈和…

如何将 ONLYOFFICE 文档 Linux 版更新到 v8.1

本指南将向您展示如何将 ONLYOFFICE 文档 Linux 版本更新到最新 8.1 版本。 ONLYOFFICE 文档是什么 ONLYOFFICE 文档是一个功能强大的文档编辑器,支持处理文本文档、电子表格、演示文稿、可填写表单、PDF 和电子书,可多人在线协作,支持 AI 集…

P A T 甲级:分类题型|字符串处理|1152、1150、1005、1001题解及延伸

系列目录 目录 系列目录1152 Google Recruitment数学证明substr()stoi() 1150 Travelling Salesman Problem1005 Spell It Right1001 AB Format 1152 Google Recruitment 原题链接 C 若未特殊标明&#xff0c;以下题解均写用C #include <iostream>using namespace std;…

软件设计师笔记-操作系统知识(二)

线程 以下是关于线程的一些关键点&#xff1a; 线程是进程中的一个实体&#xff1a;进程是操作系统分配资源&#xff08;如内存空间、文件句柄等&#xff09;的基本单位&#xff0c;而线程是进程中的一个执行单元。多个线程可以共享同一个进程的地址空间和其他资源。线程是CP…

ElasticSearch-Windows系统ElasticSearch(ES)的下载及安装

前言 下载ElasticSearch 可以进入ElasticSearch官方下载地址&#xff0c;选择与电脑系统相对应的版本&#xff1b;博主已经上传资源&#xff0c;或者点此直接免费下载&#xff0c;本次演示版本为8.14.1。 注意&#xff1a; Elasticsearch 5 需要 Java 8 以上版本&#xff1b;…

菜籽桌面4.5.0~4.5.1常见问题解答

目录 如何刷机&#xff1f; 刷机失败&#xff1f; 无法方控&#xff1f; 无法画中画? 原车音乐跟我安装的音乐一起播放&#xff1f; 原车音乐停了&#xff0c;我安装的软件也跟着没声音了&#xff1f; 调节声音时忽大忽小&#xff1f; 怎么安装软件&#xff1f; 软件…

探究互联网领域知识,解密数字化时代神秘面纱

随着信息时代的不断发展&#xff0c;互联网的发展呈现出爆炸式的增长&#xff0c;以至于引起广泛的关注和深入的探究。互联网作为一个庞大的网络体系&#xff0c;涵盖着无穷无尽的信息和知识&#xff0c;其背后的科技和应用已经改变了人们的生活&#xff0c;产生了翻天覆地的变…

easyexcel导出数据格式时,设置数值格式

easyexcel导出数据格式时&#xff0c;设置数值格式 ExcelProperty(value"得分", index1) NumberFormat("0.00_ ") private Double score;加注解NumberFormat("0.00_ ")&#xff0c;注意需要有下划线和空号 如果还不生效&#xff0c;需要修改pom…

在 JavaScript 中处理异步操作和临时事件处理程序

关键技术和设计总结 使用 Promise 和 then 进行异步操作: 我们通过使用 Promise 来处理异步操作&#xff0c;确保操作按顺序执行。在 getReportListByCurrentTime 函数中&#xff0c;返回一个 Promise 对象&#xff0c;保证在数据加载完成后调用 resolve&#xff0c;以便可以在…

锐捷网络闪耀CVPR 2024,外观异常检测方案斩获世界认可!

近日&#xff0c;锐捷网络在“视觉异常检测和创新性检测2024挑战赛”(Visual Anomaly and Novelty Detection 2024 Challenge&#xff0c;简称VAND)的少样本逻辑/结构异常检测赛道(VAND 2.0赛道2)中荣获第二名&#xff0c;并在计算机视觉顶级会议CVPR 2024上展示了这一成果&…

深入解析:npm全局安装命令的误区与正确用法

在JavaScript和Node.js开发中&#xff0c;npm&#xff08;Node Package Manager&#xff09;是管理项目依赖的得力助手。开发者经常使用npm install命令来安装所需的包。然而&#xff0c;在使用全局安装时&#xff0c;可能会遇到npm install -g和npm install --global两种命令形…

2.用BGP对等体发送路由

2.用BGP对等体发送路由 实验拓扑&#xff1a; 实验要求&#xff1a;用BGP对等体发送路由信息 实验步骤&#xff1a; 1.完成基本配置&#xff08;略&#xff09; 2.建立BGP对等体&#xff08;略&#xff09; 3.创建路由信息&#xff08;用创建一个loop back接口就能产生一个直连…

从我邮毕业啦!!!

引言 时间过的好快&#xff0c;转眼间就要从北邮毕业了&#xff0c;距离上一次月度总结又过去了两个月&#xff0c;故作本次总结。 PS: https://github.com/WeiXiao-Hyy/blog整理了后端开发的知识网络&#xff0c;欢迎Star&#xff01; 毕业&#x1f393; 6月1号完成了自己的…

el-form表单实现校验

前端表单实现&#xff0c; rules 属性传入约定的验证规则&#xff0c;并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。 <el-form ref"ruleFormRef" :model"interviewForm" label-position"left" require-asterisk-position"…

Construct公司 从 0 到 1 基于 Kitex+Istio 的微服务系统建设

本文根据 2024 年 5 月 25 日在上海举办的“云原生✖️AI 时代的微服务架构与技术实践”CloudWeGo 技术沙龙上海站活动中&#xff0c;Construct 服务端总监 Jason 的演讲《从 0 到 1 基于 Kitex Istio 的微服务系统建设》整理而来。 在微服务架构的浪潮中&#xff0c;企业面临…

k8s_如何配置 containerd 使用镜像加速拉取docker.io上的镜像

在 Kubernetes 使用 containerd 作为容器运行时&#xff0c;可以通过配置 containerd 来使用镜像网站&#xff08;镜像仓库&#xff09;拉取镜像。这可以通过修改 containerd 的配置文件来实现。以下是详细步骤&#xff1a; 步骤 1&#xff1a;安装 containerd (如果已安装&am…