iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >vue什么时候会出现白屏
  • 410
分享到

vue什么时候会出现白屏

Vue 2023-05-14 21:05:25 410人浏览 安东尼
摘要

本教程操作环境:windows7系统、vue3版,DELL G3电脑。Vue出现白屏现象主要几种原因和解决办法第一种:由于把路由模式mode设置成history了,默认是hash。解决方法:改为hash或者直接删除模式配置,如果非要用的话,

vue什么时候会出现白屏

教程操作环境:windows7系统、vue3版,DELL G3电脑。

Vue出现白屏现象主要几种原因和解决办法

第一种:由于把路由模式mode设置成history了,默认是hash。

解决方法:改为hash或者直接删除模式配置,如果非要用的话,在服务端加一个覆盖所有情况的候选资源。

如果你改成了history模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。如果非要使用history模式的话,需要你在服务端加一个覆盖所有的情况的候选资源:如果URL匹配不到任何静态资源,则应该返回一个index.html,这个页面就是你app依赖页面。

第二种:打包后的dist目录下的文件引用路径不对,会因找不到文件而报错导致白屏。

解决办法:修改一下config下面的index.js中bulid模块导出的路径。

因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的。先看一下默认的路径。

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

    

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-WEBpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'CSS'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

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

如果还是报错,修改build/webpack.prod.conf.js文件下webpackConfig,在output属性中添加 publicPath:"./",重新运行打包。

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  }

第三种:在项目中使用了es6的语法,一些浏览器不支持es6,造成编译错误不能解析而造成白屏

解决方法:安装Babel ,Babel 会把这些新语法转译成较低版本的代码。

npm install --save-dev @babel/core @babel/cli @babel/preset-env

学习视频分享:vue视频教程、web前端视频】

以上就是vue什么时候会出现白屏的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: vue什么时候会出现白屏

本文链接: https://www.lsjlt.com/news/205709.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue什么时候会出现白屏
    本教程操作环境:windows7系统、vue3版,DELL G3电脑。vue出现白屏现象主要几种原因和解决办法第一种:由于把路由模式mode设置成history了,默认是hash。解决方法:改为hash或者直接删除模式配置,如果非要用的话,...
    99+
    2023-05-14
    Vue
  • Vue首屏加载过慢出现长时间白屏的实现
    目录需求场景1. 采用懒加载的方式(官网有所提及,这里就不做详细描述)2. webpack开启gzip压缩文件传输模式:3.依赖模块采用第三方cdn资源 4. 预渲染5.遇...
    99+
    2023-05-16
    Vue首屏加载过慢白屏 Vue首屏加载
  • 数据库的等待事件什么时候会出现
    这篇文章主要介绍“数据库的等待事件什么时候会出现”,在日常操作中,相信很多人在数据库的等待事件什么时候会出现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”数据库的等待事件什么...
    99+
    2024-04-02
  • Java中什么时候会用到全屏幕模式
    小编给大家分享一下Java中什么时候会用到全屏幕模式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!什么时候会用到全屏幕模式?  也许用到的机会很少,但j...
    99+
    2023-06-03
  • win10什么时候上线 win10什么时候推出
    北京时间10月1日消息,微软公司今天在旧金山发布了自己的最新产品win10,直接跳过了win9,那么win10什么时候上线?win10什么时候出?一起来跟小编看一下吧。 现在还没有Windows 10系统发布的准确时间...
    99+
    2023-06-07
    win10
  • vue跳转出现白屏或闪屏现象的原因是什么及怎么解决
    这篇文章主要介绍了vue跳转出现白屏或闪屏现象的原因是什么及怎么解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue跳转出现白屏或闪屏现象的原因是什么及怎么解决文章都会有所收获,下面我们一起来看看吧。一、原...
    99+
    2023-07-05
  • javascript是什么时候出的
    这篇文章给大家分享的是有关javascript是什么时候出的的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 javascript是1995年出的;Ja...
    99+
    2024-04-02
  • go语言是什么时候出现的
    go语言是谷歌2009发布的开源编程语言。Go语言最初由Google公司的Robert Griesemer、Ken Thompson和Rob Pike三个大牛于2007年开始设计发明,并于2009年正式对外发布;三名初始人最终的目标是设计一...
    99+
    2023-05-14
    go语言 Golang
  • Go在什么时候会抢占P
    本篇内容主要讲解“Go在什么时候会抢占P”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Go在什么时候会抢占P”吧! 调度器的发展史在 Go 语言中,Goroutine 早期是没有设计成...
    99+
    2023-06-15
  • 微信临时链接什么时候会失效
    这篇文章给大家分享的是有关微信临时链接什么时候会失效的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。微信公众号临时链接12小时后,查看500次后就会失效。预览链接为临时链接,用户在设置自定义菜单、自动回复等功能时,...
    99+
    2023-06-20
  • c语言什么时候出的
    c++kquote>问题:c语言诞生于哪一年?回答:c语言诞生于1972年。背景:c语言因20世纪70年代计算机系统发展迅速而诞生,以满足复杂编程需求。演变:1973年出版权威教材...
    99+
    2024-04-13
    c语言 c++ c# c语言编程
  • Web3.0时代什么时候到来,Web3.0有什么机会?
    🏆作者简介,黑夜开发者,CSDN领军人物,全栈领域优质创作者✌,CSDN博客专家,阿里云社区专家博主,2023年6月CSDN上海赛道top4。 🏆数年电商行业从业...
    99+
    2023-09-26
    web3 web3.0 去中心化 区块链 智能合约 原力计划
  • vue出现白屏的情况有哪些及怎么解决
    这篇文章主要介绍“vue出现白屏的情况有哪些及怎么解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue出现白屏的情况有哪些及怎么解决”文章能帮助大家解决问题。vue出现白屏的3种情况:1、把路由...
    99+
    2023-07-04
  • vue是什么时候发布的
    这篇“vue是什么时候发布的”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“vue是什么时候发布的”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获,下面让我们一起来看看具...
    99+
    2023-06-06
  • css2.1是什么时候提出来的
    本教程操作环境:Windows10系统、CSS3版、DELL G3电脑css2.1是什么时候提出来的?2004 年 2 月。发展至今,CSS 总共经历了 4 个版本的迭代:1) CSS1.01996 年 12 月 W3C 发布了 CSS 的...
    99+
    2023-05-14
    css
  • react框架什么时候出来的
    本教程操作环境:Windows7系统、react18版、Dell G3电脑。一、React的起源和发展React是用于构建用户界面的JavaScript库, 起源于Facebook的内部项目,因为该公司对市场上所有 JavaScript M...
    99+
    2023-05-14
    React
  • 电脑打开网页时出现白屏如何解决
    这篇文章主要介绍“电脑打开网页时出现白屏如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“电脑打开网页时出现白屏如何解决”文章能帮助大家解决问题。解决方法/步骤:打开IE浏览器,找到右上角的设置...
    99+
    2023-06-27
  • JavaScript什么时候会发生自动转换
    这篇文章主要介绍了JavaScript什么时候会发生自动转换,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。JavaScript可以自由的进行数据类型转换,也提供了多种显式转换...
    99+
    2023-06-29
  • MySQL为什么有时候会选错索引
    本篇内容介绍了“MySQL为什么有时候会选错索引”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!今天在生产环...
    99+
    2024-04-02
  • html5概念提出的时间是什么时候
    这篇文章主要介绍了html5概念提出的时间是什么时候的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇html5概念提出的时间是什么时候文章都会有所收...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作