Vue | VueCli4 打包后 打开项目空白的问题

最新推荐文章于 2024-07-11 13:01:52 发布
最新推荐文章于 2024-07-11 13:01:52 发布
阅读量1.3k 收藏 3
点赞数
分类专栏： 前端日志 前端框架 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40040107/article/details/116207253
版权
当使用Vue 2.x和VueCLI 4.x构建项目并打开dist/index.html时遇到空白页问题，可能是因为路由配置错误。解决方法是在vue.config.js中设置路径为相对路径，并检查router/index.js，如果mode是history，则需注释掉相关设置。完成修改后重新打包即可正常显示。
摘要由CSDN通过智能技术生成

问题描述

使用Vue 编写项目后, 打包生成 dist 文件夹 ,然后打开文件夹中的 index.html 文件 页面空白

  • vue 版本 : 2.x
  • vue cli版本 : 4.x (不同版本会影响配置文件的位置)

解决方法

vue cli4 版本的 配置文件是 vue.config.js , 添加下面红框的内容即可, 将路径设置为相对路径
在这里插入图片描述

然后 找到 路由配置 index.js 文件 , 如果 mode 设置的是 history 就注释掉,

在这里插入图片描述
重新打包以后问题就解决了

兀坐晴窗独饮茶
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
解决vue-cli项目打包出现空白页和路径错误的问题
10-18
在使用Vue CLI构建项目时，有时会遇到打包后出现空白页和路径错误的问题。这些问题通常是由于配置不当或者对Vue CLI的打包机制理解不足所引起的。本文将详细解析这两个问题及其解决方案。 首先，让我们来深入了解...
解决vue-cli webpack打包后加载资源的路径问题
12-10
vue项目，访问打包后的项目，输入路径后，页面加载空白。这时会有两类问题，都是路径问题。 1.一个是css,js,ico等文件加载不到，是目录里少了dist 打开页面时一片空白 解决办法： config/index.js文件的build->...
vue-cli4打包成dist后打开空白的解决办法
qq_32037977的博客
01-30 1634
vue-cli4打包成dist后打开空白的解决办法## 最近使用做vue项目的时候，使用npm run build命令对项目进行打包的时候出现了问题，打包生成dist目录后，打开里面的index.html文件，发现竟然是空白！问题就是这样的，下面说一下博主打包时的环境是怎样的。 内容报错如图： @vue/cli 3 vue.config 路径如下图所示： 问题产生的环境 vue-cli的版本为4.4.1，使用vue -V 或者vue --version命令可查看 vue的版本是2.6.11 使用npm
vue cli打包后浏览的页面是空白页
qq_42362347的博客
03-12 397
@vue/cli创建项打包后打开页面为空白的问题解决 命令行输入：npm run build 打包出来后项目中就会多了一个文件夹dist，这就是我们打包过后的项目。 第一个问题，文件引用路径。 我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问题。 解决：在根目录新建vue.config.js文件,打开后进行修改 // vue....
【个人笔记】Vue.js 项目在打包后出现空白页
最新发布
qq_63856835的博客
07-11 336
Vue.js 项目在打包后出现空白页。
vueCli4搭建的单页面应用IE10、安卓低版本打开页面空白问题
qq_15006083的博客
03-11 371
vueCli4搭建的单页面应用IE10、安卓低版本打开页面空白问题 根据vuecli文档， IE下报错 修改babel配置，解决上面的报错问题 presets: [ [’@vue/app’, { polyfills: [ ‘es.promise’, ‘es.symbol’ ] }] ] 修改vue.config.js配置 transpileDependencies添加上面的报错包vue-ele-upload-image 根据上面的步骤，即可解决问题， 需要提醒的是，网上百度去添加babel-polyfi
keil5打开keil4工程时drive目录为空解决办法
Someone-y
03-23 1607
Keil5打开keil4工程时drive目录为空 修改Keil4工程后缀增加x使其变成keil5工程，再打开即可解决。
vue打包之后出现空白页的原因以及解决方式
热门推荐
温情
04-02 3万+
路由模式 history 新建项目什么都不动，路由模式：history, 直接npm run build打包 打包之后，直接打开dist文件里面的ndex.html可以看到页面是空白的，控制台是这样的。 再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入是错误的，应该用'./'而不是'/' 那怎么修改打包之后的路径呢？查看vue-cli官网配置参考中的publicPath 我们只需要在和package.json同级的地方新增一个vue.config.js文
vue项目打包后打开页面空白解决办法
08-27
在 Vue 项目开发中，经常会遇到打包后打开页面为空白的情况，本文将详细介绍解决这种问题的方法。 一、路径问题 在 Vue 项目中，index.html 文件中的内容都是通过 script 标签引入的，因此路径的问题是导致页面为...
vue打包后显示空白正确处理方法
08-28
总的来说，解决 Vue 打包后显示空白页的问题需要细心排查，从项目配置到浏览器端的错误信息，每一步都可能成为关键。记住，每个项目的具体情况可能会有所不同，所以不要怕花时间去分析和调试。同时，保持项目结构...
vue cli4 vue2 多页面打包配置与坑点
qq_36278221的博客
11-25 2802
vue cli4 vue2 多页面打包配置与坑点
关于vue-cli3打包代码后白屏的解决方案
10-14
主要介绍了关于vue-cli3打包代码后白屏的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cli 3 4打包VUE项目出现空白页面解决方案
weixin_42139781的博客
06-12 1367
1.你的vue-cli必须是3或者4的 不然不要继续看 2.在项目文件下创建vue.config.js,然后重新打包就完事啦。 你们要是遇到什么问题也可以记录下来方便下次查询，加油 module.exports={ publicPath:"./", assetsDir:"static", outputDir:'dist', } ...
打包问题-vue-cli4打包后打开index显示空白页
A88552211的博客
02-21 523
在配置文件中加入 publicPath: process.env.NODE_ENV === 'production' 没有配置文件就新建一个：vue.config.js 加入下面代码就ok module.exports = { devServer: { disableHostCheck: true, }, publicPath: process.env.NODE_ENV === 'production' ? './' .
vue-cli 项目打包后打开页面空白
小白阿里里的博客
08-26 9923
关于项目在打包后打开页面空白问题 在我们输入命令 npm run build 打包项目后在项目文件中会多出一个dist文件夹，打包后的文件就在该文件夹中，将里面的文件放在服务器上即可。 我第一次这样操作的时候，打开页面一片空白，调试模式下显示css,js全都是引入错误。 打开config文件夹下的 index.js 找到如下图所示区域： 可以看到 assetsPublicPat...
vue-cli 4.0 中打包后，页面空白，路径错误。打包报错：baseUrl is not allowed
盏茶作酒的博客
11-07 5870
在使用vue-cli 4.0的时候，npm run build的后，打开dist文件夹，打开index.html后，页面空白，控制台报错。如下图： 解决办法： 在项目中添加vue.config.js文件，内容如下： 第一次尝试： 1 module.exports = { 2 baseUrl: process.env.NODE_ENV === 'production' 3 ...
vue-cli3打包空白页面
qq_38059536的博客
09-27 962
vue-cli3打包后出现空白页面导致这个问题的原因 导致这个问题的原因 router模式设置成history了，改成hash或者直接删除路由模式的配置 没有正确配置vue.config.js文件里baseUrl，应为（baseUrl: “./”） 如果项目根目录下有config文件夹，config文件夹中的index.js文件内修改assetsPublicPath为：（assetsPublic...
关于vue/cli3打包空白页问题解决
qq_32754575的博客
10-02 7984
前提 在vue-cli2中也出现过打包后本地打开index.html空白页问题，解决办法：修改config文件夹中ndex.js文件中assetsPublicPath属性为assetsPublicPath: ‘./’，路由用hash模式 环境 vue-cli3 package.json文件如下： { "name": "my-temp", "version": "0.1.0", ...
vue-cli4.0打包之后，页面空白，路由404
q1424966670的博客
08-25 1万+
constrouter=newVueRouter({ //mode:"history", mode:"hash", base:process.env.BASE_URL, routes }); 把history模式改成hash模式
vue项目打包之后打开dist/index.html一片空白
05-23
这个问题可能有多种原因，以下是一些可能的解决方案： 1. 确保在打包之前运行了正确的命令。一般来说，打包 Vue 项目需要运行 `npm run build` 命令。如果你使用的是 Vue CLI，则可以使用 `vue-cli-service build` 命令打包。 2. 确保在打包之前配置了正确的 publicPath。在 Vue CLI 中，可以在 `vue.config.js` 文件中配置 publicPath。如果你没有配置 publicPath 或者配置错误，那么在打开 index.html 文件时可能会出现问题。 3. 确保你正确地部署了静态资源。如果你在项目中使用了静态资源（如图片、CSS 文件等），则需要将这些资源和打包后的 JavaScript 文件一起部署到服务器上。如果这些资源没有被正确地部署，那么在打开 index.html 文件时可能会出现问题。 4. 检查浏览器的控制台输出。在打开 index.html 文件时，可以打开浏览器的控制台，查看是否有任何错误或警告信息。这些错误或警告信息可能会提示你打包出现了什么问题。 5. 检查 index.html 文件中的路径是否正确。打包后的 index.html 文件中的路径可能需要手动修改，以便正确地引用打包后的 JavaScript 文件等资源。例如，如果你将打包后的 JavaScript 文件放在了一个名为 `assets` 的文件夹中，那么你需要将 index.html 文件中的引用路径修改为 `assets/js/app.js` 等。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

兀坐晴窗独饮茶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值