vue 项目打包页面空白

最新推荐文章于 2023-10-30 11:18:39 发布

胖鲁

最新推荐文章于 2023-10-30 11:18:39 发布

阅读量107

点赞数

本文链接：https://blog.youkuaiyun.com/m0_37697423/article/details/97402646

版权

修改config文件夹下 index.js文件

build环境中assetsPublicPath属性值为:‘./’

修改build文件夹下utils.js文件

ExtractTextPlugin.extract模块中增加

publicPath:'../../'属性值

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

胖鲁

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue项目打包后页面空白的问题

qq_49841234的博客

03-06

1896

第一种情况资源加载失败报错如下 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-thgdjh12-1646450652321)(file://D:/soft/Gridea/yuanwenjian/post-images/1644893370600.png)] 这个问题是由于路径的问题，我们可以在项目下新建一个 vue.config.js 文件，在里面我们输入如下代码 module.exports = { publicPath:'./' } 再重新进行打包就可以了，

vue项目使用hbuilder打包后，真机测试白屏

weixin_30824479的博客

03-30

4464

在命令行直接运行 npm run build后，生成的dist文件中,直接打开index.html文件 Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. 打包完后，提示只能在服务端可以开启，file模式下无法工作问题：使用vue脚手...

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

Vue工程利用HBuild X打包APP打开一片空白的解决方式

qq_42365842的博客

07-06

2333

Vue工程利用HBuild X打包APP打开一片空白的解决方式

使用HBUILDERX将VUE-CLI3文件打包成APP，以及解决打包后的APP出现白屏的问题（简单示例）

ALDNOAH_K的博客

10-11

2282

（原因：如果使用history模式上线，必须要服务端在服务器上有对应的模式才能使用history（看上面链接），如果服务器上没有配置，可以先使用默认的hash；4、更改 manifest.json的配置文件，因为是demo练习，我这里只进行了两个配置，其它需要配置的根据自己的项目需求完成。5、选择需要打包的项目，在工具栏中选择发行---->原生App-云打包，出现如下弹框。可选值: "hash" | "history" | "abstract"1、文件 ---->新建 ---->项目。

解决vue3打包过后空白页面

小菜鸟的博客

04-08

4164

解决vue3打包过后空白页面在项目根目录下，新建一个vue.config.js文件 module.exports = { // 基本路径 publicPath: './', // 输出文件目录 outputDir: 'dist', configureWebpack: { externals: { } } } 如果还是不可以，那么需要找到如下页面： ...

Vue在打包项目时显示空白页问题和一些解决思路

benlalagang的博客

08-01

8309

Vue在打包项目时显示空白页问题和一些解决思路、1.整体资源路径、2.路由模式、3.本地服务器的改变

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

08-27

路径配置错误是导致Vue项目打包后页面空白的常见原因之一。在Vue项目中，index.html文件是项目的入口文件，其通过script标签引入了打包后的JavaScript和CSS等资源。如果这些资源的路径配置不正确，浏览器将无法正确...

解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

01-19

Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。问题一：我在打包完成后，...

vue打包后显示空白正确处理方法

08-28

总的来说，解决 Vue 打包后显示空白页的问题需要细心排查，从项目配置到浏览器端的错误信息，每一步都可能成为关键。记住，每个项目的具体情况可能会有所不同，所以不要怕花时间去分析和调试。同时，保持项目结构...

解决Vue打包后index.html页面无内容

m0_62681656的博客

06-16

651

创建 dist 文件2. 打开 index.html 后页面空白无内容发现路径少./

HBuilder 打包

weixin_46243213的博客

10-07

2104

HBuilder 打包

Vue-cli3.0 项目打包成安卓应用

qq_43477721的博客

11-13

635

1. 打包项目修改根目录下的 vue.config.js 文件（没有就新建一个），添加下面的代码，保证打包之后不会白屏 module.exports = { publicPath: "./" } 运行 npm run build，打包之后， dist 目录下的文件，如下所示 2.使用一个神器，HbuildX，安装下载啥的，咱就不说了。新建一个 5+App 项目替换，将 dist 目录下的所有文件复制，粘贴到刚刚创建的 uniapp 项目中，全部替换。配置 manifest.json

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

最新发布

m0_68956554的博客

10-30

2130

白屏问题的原因可能是你的 H5 项目部署后的资源路径有问题。当访问页面时，浏览器会根据资源的相对路径去加载相应的文件。如果资源路径不正确，浏览器无法正确加载文件，导致页面出现白屏。在vue.config.js文件里面添加如下代码。

使用HBuilderX 打包 vue 项目为 App 的步骤

ZHIYUANfL的博客

05-31

6728

这里，我的项目是vue-cli构建的工程，h5移动端页面。由于开发成本并没有用安卓或ios原生语言来开发app，而是选择将现有项目直接打包。下面我会分享一下HBuilderX 打包 vue 项目为 App 的步骤。希望对有需求的同学提供帮助。原vue项目打包dist文件 1、首先以及必须，将config文件夹里的index.js文件中assetsPublicPath由'/'改为 '...

前端学习之路：解决vue引入assets下图片路径找不到问题

标题有点难

04-03

3万+

<img :src="imgsrc2"> export default{ data(){ imgsrc2: require('../assets/logo4.png') } }

vue项目中部分android手机加载打包后的index页面显示空白的问题：uncaught syntaxerror:block-scoped declarations...

zuo-yiran的博客

05-30

2517

在vue项目中遇到加载打包后的index页面，部分android手机会出现空白页面的问题，并且报 Block-scoped declarations (let, const, function, class) not yet supported outside strict mode 的错误，在不报此错误的其他android手机上则没有此空白页面的问题。提示的错误信息就是在严格模式下不支持这种...

vue项目打包后页面空白

06-06

可能有多种原因导致打包后页面空白，以下是一些常见的解决方法： 1. 检查浏览器控制台是否有报错信息，如果有的话，根据报错信息进行排查。 2. 确认打包后的文件路径是否正确，特别是 index.html、JS 和 CSS 文件的引用路径是否正确。 3. 检查是否有未添加到依赖中的第三方库或插件，可能会导致打包后页面空白。 4. 确认是否正确设置了路由和组件，打包后的路由路径和组件名是否匹配。 5. 使用 Vue Devtools 插件进行调试，查看组件的状态和数据是否正常。 6. 尝试使用命令行工具运行打包后的文件，查看是否有报错信息，如果有的话，根据报错信息进行排查。希望这些方法能对你解决问题有所帮助。