vue-cli项目打包后运行页面空白

最新推荐文章于 2024-03-13 17:52:08 发布

欢颜啦

最新推荐文章于 2024-03-13 17:52:08 发布

阅读量747

点赞数

分类专栏： vue-cli问题笔记 vue-cli 问题笔记文章标签： vue-cli

本文链接：https://blog.csdn.net/qq_38913900/article/details/86564492

版权

vue-cli问题笔记同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

vue-cli

3 篇文章 1 订阅

订阅专栏

问题笔记

2 篇文章 0 订阅

订阅专栏

本文详细解析了Vue项目打包后出现页面空白的问题原因，通常由于文件路径配置不当导致资源加载失败。文章提供了修改assetsPublicPath参数为'./'的具体步骤，确保index.html能够正确引用静态资源。

摘要由CSDN通过智能技术生成

vue-cli项目打包后运行页面空白

可能情况：打包后文件路径不对，引用失败导致空白

解决方法：

assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级目录下面。所以要改为 ‘./ ’;
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

欢颜啦

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

解决vue-cli项目打包出现空白页和路径错误的问题

10-18

在使用Vue CLI构建项目时，有时会遇到打包后出现空白页和路径错误的问题。这些问题通常是由于配置不当或者对Vue CLI的打包机制理解不足所引起的。本文将详细解析这两个问题及其解决方案。首先，让我们来深入了解...

vue-cli项目打包后样式空白（或者是样式出现一部分）_vue3 构建后部分样式丢失,重新构建后出现

2401_84434086的博客

05-16

570

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。很多人踩这个坑的时候花了很多时间，网上的教程基本上都是说的第一个坑，这个坑很少有人提起。这个坑是当你使用了路由之后，

参与评论您还未登录，请先登录后发表或查看评论

【Vue-cli】打包后页面空白

joanmelon的博客

11-08

291

Hi，我是宾果的救星~希望能够给你带来思路解决难题~

vue-cli + vue3.0创建的项目，打包后白屏

weixin_44384273的博客

03-13

961

vue-cli + vue3.0创建的项目，打包后白屏 vue.config.js 配置模板

记录uniapp打包app过程以及遇到的空白问题

m0_64816413的博客

08-03

8716

对象在移动端的uni-app中不存在，因为uni-app是基于WebView来运行的所以会报错我们把它注释掉因为在app中咱们也不用担心用户没有登录通过地址栏跳转页面的这种情况。打包完成后你的目录会生成一个unpackage文件夹下面会有一个apk文件夹里面就是apk的包，我们把他安装到手机上就可以啦。紧接着回到我们的Hbuilder 在操作栏找到运行->运行到手机或者模拟器->运行到安卓基座。解释一下这段代码在h5上是可以正常运行的但是这段代码在uni-app真机调试时报错的原因是。

解决Vue CLI创建Uni-app项目报错的方法

RaAutoit的博客

09-26

2419

请确保将Vue CLI的安装路径添加到系统的PATH环境变量中。本文将介绍一些常见的报错情况，并提供相应的解决方法。通过以上方法，您应该能够解决一些常见的报错情况。如果您遇到的问题不在上述范围内，可以尝试搜索相关报错信息或在开发者社区提问以获得更多帮助。这个报错通常是由于Vue CLI没有正确安装或配置导致的。这个报错通常是由于Uni-app没有正确安装或配置导致的。这个报错通常是由于项目中的依赖文件缺失或损坏导致的。这个报错通常是由于端口号8080已经被占用导致的。命令，以安装项目的依赖文件。

解决vue-cli webpack打包后加载资源的路径问题

12-10

vue项目，访问打包后的项目，输入路径后，页面加载空白。这时会有两类问题，都是路径问题。 1.一个是css,js,ico等文件加载不到，是目录里少了dist 打开页面时一片空白解决办法： config/index.js文件的build->...

vue项目打包后打开页面空白解决办法

08-27

Vue 项目打包后打开页面空白解决办法在 Vue 项目开发中，经常会遇到打包后打开页面为空白的情况，本文将详细介绍解决这种问题的方法。一、路径问题在 Vue 项目中，index.html 文件中的内容都是通过 script ...

解决vue3，cli4用uniapp打包app出现白屏问题

ll010705的博客

05-03

2241

解决vue3，cli4用uniapp打包app出现白屏问题问题描述：用VScode制作的vue3项目，用uniapp打包APP后，出现白屏（没有报任何错误）解决办法：在vue3原项目的根目录（与packa.json同级）下创建vue.config.js文件夹，配置如下然后npm run build打包成dist文件夹打开uniapp创建一个5+App（A）项目删除css,img,js和index.html文件替换为打包后的dist（我这里自己改为了dists，可以不用改）文件 ![在这里插

uni-app打包项目成h5，遇到本地访问页面空白

YourPasser的博客

10-25

2655

直接在本地打开static里面的inedx.html的时候，会出现空白页面。

vue打包之后出现空白页的原因以及解决方式

温情

04-02

3万+

路由模式 history 新建项目什么都不动，路由模式：history, 直接npm run build打包打包之后，直接打开dist文件里面的ndex.html可以看到页面是空白的，控制台是这样的。再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入是错误的，应该用'./'而不是'/' 那怎么修改打包之后的路径呢？查看vue-cli官网配置参考中的publicPath 我们只需要在和package.json同级的地方新增一个vue.config.js文

vue-cli 项目打包后打开页面空白

小白阿里里的博客

08-26

9969

关于项目在打包后打开页面空白问题在我们输入命令 npm run build 打包项目后在项目文件中会多出一个dist文件夹，打包后的文件就在该文件夹中，将里面的文件放在服务器上即可。我第一次这样操作的时候，打开页面一片空白，调试模式下显示css,js全都是引入错误。打开config文件夹下的 index.js 找到如下图所示区域：可以看到 assetsPublicPat...

vue-cli3项目，浏览器运行正常，打包后页面空白报错，解决方案

面对疾风吧

08-16

9801

vue-cli3创建的项目，打包后页面空白报错解决萌新专用，直接复制过去就ok，直接上代码在你的项目里新建一个文件：vue.congif.js ，是src的同级目录下创建，不是src里面创建文件哦！然后复制这段代码过去就OK了，直接打包运行就行了。我都帮你配置好了。如果要上线的话，你记得改改路径，路径名称要加上你的服务器的，当然如果只是打包后不放在服务器上，直接打包运行就ok。就像下......

vue-cli3打包后出现空白页的解决方案

Oralinge

08-26

1万+

在vue.config.js文件中加入如下配置： // 基本路径 // baseUrl: './',//vue-cli3.3以下版本使用 publicPath: './', // vue-cli3.3+新版本使用

关于vue-cli打包后，index显示空白页解决方法

Jasons的博客

07-03

8772

1.修改打包时，文件引用路径在config文件加下index.js文件中，找到 build 中的 assetsPublicPath 将 assetsPublicPath: '/' 修改为 assetsPublicPath: './' 即添加一个点2.注释相关打印提示（可选）在build文件加下build.js文件中，将一个 console.log 注释掉3.重新build 3.1如果没有进行第...

vue-cli3项目中，配置vue.config.js解决打包以后页面空白问题

沧笙踏歌的博客

03-31

3926

问题说明项目用的是vue-cli3,我是在npm run build以后，打开打包好的文件，结果页面空白，打开console控制台，结果是文件的路径引入错误。解决根目录下新建vue-config-js 我们简单一些，不写其他配置项 module.exports = { publicPath: "./" }; 修改route配置吧mode: "history",注释掉，这样，默认就...

vue项目打包后打开空白解决办法