关于vue打包上线遇到的坑

最新推荐文章于 2023-05-24 16:42:51 发布
最新推荐文章于 2023-05-24 16:42:51 发布
阅读量101 收藏
点赞数
分类专栏： 前端高级
原文链接：http://www.mark-to-win.com/tutorial/50798.html
版权

vue

打包上线经常会经常遇到路径找不到，页面空白，那么下面我们就解决一下。

第一步、先找到config目录的index.js
在这里插入图片描述

改成如上图红框标注所示

第二步、找到build下的utils.js文件
在这里插入图片描述

加上如上图红框所示代码

还有一个问题，就是大家再带入ico图标时，打包后不显示，这里推荐你将图标文件放在根目录下的static文件夹里面，然后直接因这个路径就可以了。

更多请见：http://www.mark-to-win.com/tutorial/50798.html

忍者1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决Vue打包上线之后部分CSS不生效的问题
10-16
总的来说，解决Vue打包后CSS不生效的问题，需要从CSS处理、压缩设置、Source Map配置以及代码本身等多个角度去排查。通过合理的配置和调试，我们可以确保应用在生产环境下的样式表现与开发环境保持一致，为用户提供...
vue.js项目打包上线的图文教程
01-21
vue的项目如何上线，当时有千奇百怪的回答，我在想，这些人都是肿了么，vue的官方都说了，这个框架只是做了view这一层，所以并不是把这些开发完的东西直接拷贝到服务器上，而且需要打包为静态文件上传服务器的。...
Vue打包问题
xuedengyong的博客
05-14 380
Vue打包会遇见各种各样的问题，总结如下， 1.打包后页面为空白，没有报错信息 一般是Router中的mode被设置成了history模式，如 export default new Router({ linkActiveClass: 'active', // mode: 'history', //加入这一句即可去掉路径中的# routes: [] 因为VUE根据#确认根路径，然后获取...
vue 项目 run build 打包后页面空白 资源加载失败的问题
weixin_52485890的博客
09-16 5139
vue 项目 run build 打包后页面空白 资源加载失败的问题
vue项目打包后显示空白解决方案？
DW14687的博客
12-09 8512
目录前言一、页面空白？二、图片加载不出来？总结vue打包后会出现空白页面，这说明配置的时候路径有问题，接下来一起看看如何解决把。页面空白说明打包路径有问题，打开config/index.js，找到build下的assetsPublicPath，修改为'./'，如下：这里说一下，dev环境下 assetsPublicPath: '/'，表示项目根目录，build 环境下的 assetsPublicPath: './'，表示当前更目录配置完后打包发现有页面出现了注意：如果还没有页面出现，那可能是你的路由模式选用
vue打包的坑、打包部署后页面空白，且无报错、路由报错、路径、懒加载
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
04-01 6178
vue打包的坑、打包部署后页面空白，且无报错、路由报错、路径、懒加载
vue3 打包部署后某个页面不加载问题
weixin_44536001的博客
05-24 587
同时在setup中有 const map = reactive({})时 本地开发页面一切正常当部署到生产环境时会导致页面无法加载且其他页面也需要重新加载才能正常跳转。当页面某个元素被赋予ref时例如。
vue cli3.0打包上线静态资源找不到路径的解决操作
10-15
在使用 Vue CLI 3.0 进行项目打包时，可能会遇到静态资源（如图片、CSS、JavaScript 文件等）找不到路径的问题。这个问题通常出现在部署到服务器后，因为本地开发环境与线上环境的资源路径不同。以下是如何解决这个...
vue.js iview打包上线后字体图标不显示解决办法
10-15
在Vue.js项目中，特别是使用了iView UI库的情况下，开发者可能会遇到打包上线后字体图标不显示的问题。这个问题通常是由于资源路径配置不正确或打包过程中处理CSS样式的方式导致的。以下是一些解决此问题的方法： 1...
从一次故障聊聊前端 UI 自动化测试
weixin_48726650的博客
07-19 244
背景 事件的起因在于老板最近的两次“故障”，一次去年的，一次最近。共同原因都是脚手架在发布平台发布打包时出错，导致线上应用白屏不可用。 最神奇的是，事后多次 Code Review，结果还是没有发现任何能够导致该问题的 bug，最后推测有可能是服务器在发布打包的时候出了问题。 当老板第 N + 1 次吐槽因为他写的工程化工具领来的天外飞锅，我突然思考起来，如何才能避免这种天外飞锅。 归根结底，导致这类线上故障的原因都是在于打包上线的代码没有经过验证。针对这个问题，有两种方法可以解决： 治本，由于请求地址不
Vue如何实现hash模式网址（就是那种带#的网址、井号url）
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
04-15 2311
把模式改成hash hash模式下网址形如 http://127.0.0.1/#/home http://localhost/#/home 扩展阅读→Angular如何实现hash模式网址
vue项目打包上线流程以及遇到的问题
weixin_50304773的博客
09-24 531
vue项目打包上线流程以及遇到的问题 1.打包上线过程 1.1如何打包？ 在项目的package.json文件中的build命令可以实现打包。 在终端执行命令npm run build,会在项目根目录下生成一个dist文件夹，打开文件夹如图。 打开phpStudy服务，将dist文件夹放至phpStudy文件下的WWW文件夹下即可在本地访问查看。 2.打包期间遇见问题 2.1 css,js等静态文件路径错误 更改配置文件。打开项目文件下config文件夹下的index.js文件，将其中的build
vue项目中favicon.ico图标不显示
a5252145的博客
11-07 2010
favicon.ico图标添加
LABVIEW TCP通讯调试助手
07-29
本文接收如何利用Labview的TCP通讯工具做通讯，这里手把手教各位做一个简单的TCP通讯调试助手，可以局域网互相聊天哦！ 具体介绍见下面连接：https://download.csdn.net/download/weixin_41671635/89595897
机器学习与人工智能教程
07-29
机器学习与人工智能教程
零基础入门转录组数据分析-WGCNA(加权基因共表达网络) 配套资源
最新发布
07-29
零基础入门转录组数据分析-WGCNA(加权基因共表达网络) https://blog.csdn.net/weixin_49878699/article/details/140304846 教程配套的原始数据+代码+处理好的数据文件
【创新未发表】Matlab实现引力搜索优化算法GSA-Kmean-Transformer-BiLSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
原始ISET，用作ISETIO的基础-图像系统工程工具箱-matlab
07-29
原始ISET，用作ISETIO的基础 相机（Cam）的图像系统工程工具箱（ISET）。ISETCam是基础存储库。它包括其他ISET存储库用于表示场景、光学、能量、量子、颜色和软件实用程序的基本例程。ISETCam是运行ISETBio和大多数其他ISET存储库（如ISET3D、ISETAuto、ISETLens）所必需的。 原始ISET的开源版本，用作ISETIO的基础
【创新未发表】Matlab实现能量谷优化算法EVO-Kmean-Transformer-BiLSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
vue 打包上线 vue-cli配置反向代理
08-09
要在Vue项目中配置反向代理，首先需要使用Vue CLI进行打包。Vue CLI是一个用于快速搭建Vue项目的工具，它提供了一些默认的配置文件和命令。以下是步骤： 1. 安装Vue CLI：通过npm全局安装Vue CLI的最新版本，命令是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值