vueAdmin项目打包

最新推荐文章于 2025-12-02 11:05:02 发布
原创 最新推荐文章于 2025-12-02 11:05:02 发布 · 2.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文是作者的人生第一篇博客，主要讨论在Vue+SpringBoot项目开发中，前端打包后可能出现的静态资源无法被后端访问或前端请求后端失败的问题。分析了问题可能的原因，包括前端项目的根路径与后端不匹配，以及前端请求路径与后端接收路径不一致。以Vue-admin-template为例，介绍了如何在Webpack4中配置打包时的项目根路径和请求路径，以解决这类问题。

人生的第一篇博客

记录在项目开发过程种出现的问题，若出现相同的情况可以快速解决该问题

在项目采取前后端开发时,例如（vue+springboot），最后前端工程要打包成静态文件资源给后端，然后后端控制路径进行资源映射，但在打包过程中，有可能会出现后端无法访问前端的静态资源或者前端请求后端无法接收到(404 not found)。

而我最近在使用 vue-admin-template这个项目模板，前期一切顺利，就是在最后打包的时候出现了上述的问题

一般出现这种情况的原因有两种：要么是前端出问题，要么是后端出问题。

而我接下来从前端的角度来分析造成这种情况的原因

对于前端来说，其实出现这种情况主要由两种原因早成的

  1. 打包时项目的根路径没有和后端匹配（后端无法访问前端打包的静态资源）

    例如后端访问该静态资源的根路径是 ‘/mange/’,而前端项目的根路径是‘/’

  2. 前端请求的根路径没有和后端接收请求的根路径匹配（后端无法接收前端发出的请求）

    例如后端接收前端请求的根路径是 ‘/mange/’,而前端项目的根路径是‘/’

一般这两个问题解决了，就差不多了。

但是如果还是后端无法访问前端打包的静态资源那或者前端请求后端无法接收到就有可能是后端出现了问题。

前端要和后端一起排查造成该问题的原因。

因为前端打包的工具其实是各种各样的，他们对于项目的根路径和请求的根路径的处理方式都是不同的，而我接下来则以我自身的例子（我这里是使用webpack4的，使用的项目模板是vue-admin-template）来看看具体如何解决上述情况

这是项目结构：
在这里插入图片描述

webpack打包会根据build/index.js进行打包,打包时的一些

最低0.47元/天 解锁文章
Re_Code
关注
Vue2.0 | 将项目打包成exe文件
FSYML
02-01 1730
摘要：本篇详细介绍如何使用 pkg 插件将 Vue 项目打包成 exe 文件。
vue-admin-template-master.zip
05-21
对于初步学习VUE的童鞋，这是一版非常好的框架布局。没有添加过多的模块。下载后解压到你的工作空间，根据README.md文件操作即可。
vue-admin-template
03-05
vue-admin-template 极简后台模板以及vue-element-admin后台集成环境
【Vue】安装打包vue-admin-template并解决报错
Qxn530的博客
09-26 2975
安装vue-admin-template过程、解决vue-admin-template安装报错以及简单讲述打包过程
Vue-Admin: 构建高效后台管理界面的现代解决方案
最新发布
gitblog_00073的博客
12-02 533
是一个基于 Vue.js 和 Element UI 的现代化后台管理系统模板。它为开发者提供了一个快速构建企业级后台界面的基础框架，减少了从零开始搭建项目的复杂度和时间成本。 ## 项目简介 Vue-Admin 提供了一套完整的 UI 模板、路由配置、权限控制等基础组件，帮助开发者能够迅速构建出美观且功能齐全的后台管理界面。该项目遵循了单页应用（SPA）的设计模式，结合 Vue.js 的响应式
vue-admin 打包成桌面软件
何三巡的博客
01-11 351
vue-admin 打包成桌面软件
vue-admin-template 打包生成外部可修改接口配置文件
qq_43030908的博客
03-22 2001
1、在public目录下新建config.js文件 var PLATFROM_CONFIG = {}; PLATFROM_CONFIG.baseUrl = "http://1.1.1.1:100" 2、配置utils目录下的request.js文件 let baseURL = window.PLATFROM_CONFIG.baseUrl const service = axios.create({ baseURL:baseURL, timeout: 5000 // 请求超时 }) 3、在pub
vue前端项目打包并且在Linux服务器上部署过程（vue-admin-template-master）
热门推荐
摆渡人一直都在
12-29 5万+
一、vue前端项目打包过程 1.vscode前端开发工具简介 Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。...
解决vue+elementui项目打包后样式变化问题
11-19
main.js中的引入顺序决定了打包后css的顺序，组件内的样式没有生效可能是被第三方组件样式覆盖了，所以把第三方组件放在前面引入，router放在后面引入，就可以实现组件样式在第三方样式之后渲染。 代码如下： main....
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
10-14
Vue.js项目在开发过程中，通常会使用`npm run build`命令进行打包，打包后会在项目根目录下生成一个名为`dist`的文件夹，其中包含了编译后的静态资源，适合部署到生产环境。然而，有时候将项目推送到Git仓库时，可能...
vue-admin-element+Electron打包exe可执行文件(输出为dist文件夹即可)
04-24
在标题和描述中提到的“vue-admin-element+Electron打包exe可执行文件”，意味着开发者正在尝试将基于Vue.js和Element UI的管理后台应用与Electron结合，打包成Windows平台的.exe可执行文件。这个过程通常是为了将...
vue-admin-template打包部署及跳过登录验证
qq_36571947的博客
04-16 2661
1、修改vue.config.js 将publicPath的值改为’./’(设置打包后的静态资源为相对路径,避免加载不到css、js导致页面白屏) outputDir：打包后的文件夹名 assetsDir：打包后的静态资源文件夹名 2、三个文件中的VUE_APP_BASE_API改为自己的请求地址 3、修改登录请求接口 4、注释掉src/main.js中此段代码 不使用mock数据，使用自己的接口数据 5、修改util/request.js中的code判断，改为自己后端返回的code 6、如需跳过
第13章 vue-admin-template
richieandndsc的博客
03-31 6812
这是一套简单的vue基础课程，主要介绍vue,vue-router,axios,vuex,element-ui等等
vue-antd-admin打包路径问题
qq_39375797的博客
12-08 1124
vue-antd-admin打包路径问题 vue.config.js publicPath修改即可
Vue模板框架vue-admin-template上手指南
rainafter1208的博客
04-17 4473
本文介绍了vue后台前端的快速上手步骤
前端项目vue-admin-template 部署
qq_40596257的博客
03-28 4708
上个文章记录了怎使用vue-admin-template进行二次开发，今天记录下项目开发完了怎样部署在自己的服务器上： 新手，我推荐安装宝塔界面，方便 今天我们就使用xshell和xftp，首先连接上自己的服务器 第一步：下载nginx 然后再nginx官网下载linux版本的nginx，然后上传到服务器上，可以使用xftp拖上去，然后放在随便一个文件夹，或者自己新建一个文件夹，然后解压这就要使用命令来解压了 第二步：上传和解压 解压命令： 　　命令格式：tar -zxvf 压缩文件名.tar
Vue-element-admin打包发布和白屏、proxy跨域等问题、RuoYi
林中明月间丶
03-26 4329
vue.config.js里面 publicPath: './',
【亲测免费】 Vue Admin Better 项目下载及安装教程
gitblog_01228的博客
10-18 1180
Vue Admin Better 是一个基于 Vue.js 和 Element UI 的开源后台管理系统模板。它提供了丰富的功能和组件，适用于快速搭建企业级后台管理系统。项目支持 Vue 2.x 和 Vue 3.x 版本，并且提供了多种布局和主题选择，满足不同用户的需求。 ## 2、项目下载位置 你可以通过以下链接下载 Vue Admin Better 项目： [Vue Admin Bett...
Vue项目打包部署
m0_37978198的博客
08-09 749
本文介绍了，基于vue-admin-template开发的Vue项目如何打包部署，描述了其基本流程，过程相对简单，有兴趣的可以参考下。
vue antd admin打包
05-07
### 关于 Vue Antd Admin 打包方法 #### 1. 环境准备 在执行打包之前，确保已经安装了项目的依赖项。可以通过运行以下命令完成依赖的安装： ```bash npm install ``` 如果使用的是 `yarn`，则可以替换为： ```bash yarn install ``` 此过程会读取 `package.json` 文件中的依赖列表并下载所需的模块[^2]。 --- #### 2. 修改环境变量 Vue Antd Admin 支持通过 `.env.*` 文件配置不同的环境变量。为了确保生产环境中能够正常工作，在根目录下创建或修改 `.env.production` 文件，设置必要的参数，例如 API 地址或其他全局常量： ```plaintext VUE_APP_API_URL=https://your-production-api-url.com/api/ NODE_ENV=production ``` 这些变量会在打包过程中被注入到应用程序中[^3]。 --- #### 3. 构建命令 执行以下命令即可开始打包操作： ```bash npm run build ``` 或者如果你正在使用 Yarn，则应运行： ```bash yarn build ``` 该命令会依据 `vue.config.js` 中的配置自动优化代码、压缩资源，并生成静态文件至默认的 `dist/` 目录中[^4]。 --- #### 4. 自定义构建选项 如果需要调整构建行为，可以在项目根目录下的 `vue.config.js` 文件中进行自定义配置。例如，指定输出路径或启用 Gzip 压缩支持： ```javascript module.exports = { outputDir: 'build', // 更改输出目录名称 configureWebpack: { optimization: { splitChunks: { chunks: 'all', }, }, }, }; ``` 以上配置允许开发者灵活控制最终产物的形式和大小[^2]。 --- #### 5. 处理常见问题 - **打包体积过大**: 可能是因为未移除开发阶段使用的工具（如调试插件）。建议检查 `webpack-bundle-analyzer` 插件分析结果，定位冗余部分。 - **跨域错误**: 如果接口调用涉及跨域访问，请确认服务器端已开启 CORS 支持；另外也可以利用代理机制解决本地测试期间的问题[^1]。 --- #### 6. 部署注意事项 完成后需将 `dist/` 下的内容上传至目标服务器。对于某些特定场景可能还需要额外处理 CSS 和 JS 的加载方式以及图片引用链接等问题[^4]。 ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值