vue项目打包部署到服务器，报错。

最新推荐文章于 2024-04-03 10:18:49 发布
原创 最新推荐文章于 2024-04-03 10:18:49 发布 · 745 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

文章讨论了后端部署问题，指出名称不匹配导致前端显示异常，解决方案是确保后端配置名称与前端包名称对应一致。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这个是因为后端部署服务器时，名称没有对上，不是前端的问题，后端配置名称和前端的包名称保持一致就可以了。

【Vue报错】app.js:167 Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘)
weixin_56035334的博客
09-16 4395
app.js:167 Uncaught TypeError: Cannot read properties of undefined (reading 'install') at Function.Vue.use (vue.runtime.esm.js?c320:5739:1) at eval (index.js?5aa4:19:1) at Module../src/router/index.js (app.js:95:1) at __webpack_require__ (a
Vue-cli3.0修改打包后的文件名和文件地址，打包后本地运行报错
weixin_43047977的博客
07-02 5203
vue-cli3.0修改打包后的文件地址和文件名vue-cli3.0修改打包后的文件地址和文件名问题描述修改文件名报错解决 vue-cli3.0修改打包后的文件地址和文件名 问题描述 最近开发一个web端vue项目时使用了vue-cli3.0搭建项目目录，开发过程中一切顺利，没有遇到什么问题，开发完毕打包上线时出现了问题，打包后的文件默认在dist目录下，打开index.html时发现不能运行，报...
vue打包之后放在服务器中访问报错
夜月晓晓的博客
01-27 1175
查看报错原因发现路径直接是根路径了，配置这个之后，问题解决
【Vue3】解决Vue打包后上传服务器 资源路径加载错误
m0_64494670的博客
11-23 970
在Vue项目中，如果打包后的文件放在了站点根目录的子目录下，而资源的寻找路径却是基于站点根目录，可能会导致资源加载错误
Vue项目+ 打包解决静态资源无法加载和路由加载无效(404)问题
蓝胖子的博客
04-03 2432
Vue项目+ 打包解决静态资源无法加载和路由加载无效(404)问题
Vue 项目部署到服务器的问题解决方法
01-19
相信很多小伙伴在用Vue-cli安装的脚手架开发的时候，在开发环境中项目可以很正常的运行，但是进入到生产环境，编译打包后，放入服务器，项目就不正常了，会出现空白页或者路由跳转404等问题。遇到这些问题不要慌张，...
解决vue打包后刷新页面报错：Unexpected token <
10-16
在使用Vue.js框架开发的项目中，打包后的静态文件部署到生产环境中时，遇到了页面刷新后报错“Unexpected token <”的问题。这个问题表明在解析index.html或者发生错误的页面时，解析器遇到了一个不符合预期的字符...
vue+netcore项目打包发布部署详细步骤，以及报错处理
02-17
本文将详细介绍如何将Vue前端项目和.NET Core后端项目打包、发布、部署到生产环境，并提供一些常见的报错处理方法，以便开发者能够快速定位并解决部署过程中遇到的问题。 首先，无论是Vue项目还是.NET Core项目，...
vue项目打包部署到nginx服务器上
暮子凡的博客
07-10 2461
vue项目打包部署到nginx服务器上 一,打包前的项目配置修改 修改资料路径并对之前开发环境的代理配置进行注释 修改资源访问路径publicPath: "./",目的是为了避免出现打包访问时出现空白页面 注释开发环境代理配置是由于后面在nginx进行代理配置 module.exports = { publicPath: "./", outputDir: "dist", // 输出文件目录 //assetsDir: "static", // 配置js、css静态资源二级目录的位置 d
Vue中跨域及打包部署到nginx跨域设置方法
10-16
本文将详细介绍Vue项目开发中遇到的跨域问题及其解决方法，以及如何将打包后的Vue项目部署到Nginx服务器，并设置跨域。 ### 跨域问题的概述 跨域问题是指由于浏览器的同源策略限制，前端项目中的JavaScript代码...
vue项目部署到tomcat服务器产生的404问题解决
qq_50121370的博客
01-13 2729
如果我们想用IDEA部署启动的话,需要设置Application context设置为/，其实直接访问服务器就是默认访问该项目了。我使用的是在IDEA创建web项目，将打包好的文件放置到项目之中，配置好tomcat服务器运行。之后出现如上的错误。查看网络，发现在请求资源的时候，并没有走项目路径，请求的url应该为。启动tomcat服务器，可以发现项目正常运行了。这里跳过了项目名称，直接进行申请。
将前端vue项目部署到服务器上（详细教程&各种bug解决办法）
wyhvivi的博客
12-22 3822
将前端vue项目部署到服务器上（详细教程&各种bug解决办法） 解决打包后页面空白，无法访问宝塔界面等问题，部署后页面500的问题。
vue3打包部署后，报错解决记录。访问页面index.html空白、页面刷新后nginx404问题
weixin_42508580的博客
09-29 6462
项目情况：使用的createWebHistory创建history达到访问路径不带#的效果，但是发现项目没有配置nginx转发，在vue-router文档中，配合createWebHistory使用需要nginx配置转发到index.html。在webpack配置中（vue.config.js）配置chunks时通过加入[‘chunk-vendors’, ‘chunk-common’]参数来解决预加载问题，如下。提示使用链接预加载的，但在窗口加载事件后的几秒钟内没有使用。值，并且是故意预装的。
解决vue项目安装依赖报错,依赖问题多种解决办法
热门推荐
weixin_42418774的博客
06-02 3万+
需求： 把vue项目打包，移植到其他地方或者其他电脑上运行开发时往往会发生运行报错，安装依赖报错 一、node_modules版本与本机安装的node和npm版本不一致 我这里是已经修改过了，所以一样，如果版本不一样就修改为一致 再删除node_modules文件，重新npm install安装依赖 二、webpack与webpack-dev-server的版本不兼容 在本vu...
vuepress打包报错：error Error rendering /:
东扯葫芦西扯瓜——前端小菜鸟的博客
09-06 2970
error Error rendering /:
vue项目本地开发完成后部署到服务器后报404
weixin_50367873的博客
11-17 3371
前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可我们知道vue项目在构建后，是生成一系列的静态文件常规布署我们只需要将这个目录上传至目标服务器即可让web容器跑起来，以nginx为例配置完成记得重启操作完后就可以在浏览器输入域名进行访问了当然上面只是提到最简单也是最直接的一种布署方式什么自动化，镜像，容器，流水线布署，本质也是将这套逻辑抽象，隔离，用程序来代替重复性的劳动，本文不展开。
vue项目打包app时，页面出现白屏，报错 Uncaught SyntaxError: Unexpected token ‘＜‘ 的解决方法
m0_54630400的博客
05-09 4224
vue项目的代码打包后，部署到服务器上面，打开后控制台报错如下： 打开html后，发现是第一行报错了。 这个是文件引入的问题，但是在这里可以通过以下方法解决： 在vue.config.js中加入一行配置： publicPath: process.env.NODE_ENV === "production" ? "./" : "/" 用这个方法便可以解决以上问题 ，但是后续会出现页面布局混乱，可能还是这个问题没有解决根本，遇到此类问题的小伙伴，可以看下面的这篇文章 ...
Vue组件库出现$listeners is readonly等错误的原因及预防方法
JokerSoulClub的博客
03-08 3426
根本原因是因为组件库的package.json中dependencies包含了vue包，然后导致最后打包出来的组件库也包含vue包然后和引用这个组件库的项目中的vue发生冲突。举个例子，project1是vue组件库，package.json中dependencies包含了"vue":“2.6.1”project1打包出了"project1":“0.0.1” 这个组件包。
app.js文件报错
nalanala_的博客
10-10 1196
微信小程序编译app.js文件报错，使用开发者工具解决
@vue-office打包部署报错
最新发布
03-11
### 解析 @vue-office 项目打包部署时遇到的错误 #### 一、模块未找到错误分析与解决办法 当遇到 `Module not found` 类型的报错，表明构建工具未能定位到指定模块。对于类似 `ERROR in ./src/main.js Module not found: Error: Can't resolve './components/payments'` 的情况，这通常意味着 Webpack 构建过程中找不到路径为 `'./components/payments'` 的组件文件。 为了修正此问题，建议检查并确认以下几点： - **路径准确性**：确保导入语句中的相对路径无误，即从当前文件位置出发能够准确指向目标文件的位置[^1]。 - **文件存在性**：验证所引用的组件确实存在于预期目录下，并且其命名（含大小写）完全匹配于 import 或 require 中给出的名字。 如果是因为特定依赖项缺失引发此类异常，则可以尝试通过命令行执行如下操作来移除不必要的包以及重新安装所需库： ```bash npm uninstall vue -S # 移出 package.json 对应版本需加-S参数 npm install # 安装所有依赖 ``` #### 二、优化生产环境性能配置 针对打包后的页面加载速度过慢的问题，可以通过调整 Webpack 生产模式下的压缩插件设置提高效率。具体做法是在项目的 webpack 配置文件中加入 UglifyJS 插件的相关选项，从而实现更高效的代码压缩效果: ```javascript // 在 webpack.prod.conf.js 文件中添加或修改相应部分 new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_debugger: true, drop_console: true } }, sourceMap: config.build.productionSourceMap, parallel: true }) ``` 上述配置有助于减少最终输出文件体积，进而加快首屏渲染时间[^2]。 #### 三、处理静态资源引用不当引起的打包失败 为了避免因不恰当的 URL 路径而导致静态资源无法正常加载的情况发生，在 Vue CLI 创建的应用程序里应当遵循官方指南推荐的方式去访问位于 `/static` 文件夹内的图片或其他多媒体素材。需要注意的是，这里提到的 "不要带 / 前缀" 实际上是指避免使用绝对路径形式(`/static/*`)，而应该采用相对于根目录的形式 (`static/*`) 来书写链接地址；因为后者可以让 Webpack 更好地理解这些资源的实际位置关系，确保它们能被正确纳入打包流程之中[^3]。 #### 四、修复打包后页面显示为空白的现象 有时即使解决了前面提及的各种潜在隐患之后仍然会出现浏览器端只显示出一片空白的情形。此时可考虑对 Webpack 输出公共路径(publicPath) 进行适当调整。一种常见的方法就是在 build/utils.js 文件内部增加 publicPath 属性定义，将其值设为相对于服务器文档根的一个合适层级，比如 `../../` ，以此保证 HTML 文件和其他静态资产之间的相对引用保持一致性和有效性[^4]: ```javascript output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'), publicPath: '../../' } ``` 以上措施综合运用可以帮助有效应对大多数情况下发生的 @vue-office 项目打包部署过程中的常见难题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值