vue搭建项目出现白屏是什么原因

vue搭建项目出现白屏是什么原因，什么时候会出现白屏？下面web建站小编给大家详细介绍一下！

1、浏览器版本过低，不支持es6语法

//安装Babel ，Babel 会把这些新语法转译成较低版本的代码
npm install --save-dev @babel/core @babel/cli @babel/preset-env

2、路由模式错误

把路由模式mode默认hash改成设置成history了。

3、打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏。

build: {
  index: path.resolve(__dirname, '../dist/index.html'),
  
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',
  
  productionSourceMap: false,
  devtool: '#source-map',
  
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  
  bundleAnalyzerReport: process.env.npm_config_report
}

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

vue项目中如何配置babel转换代码

Vue入门需要掌握哪些知识

vue项目如何把es6语法转es5

DEDECMS不支持PHP5.3、5.4及以上版本后台500错误白屏

标签： Babel, 白屏

上面是“vue搭建项目出现白屏是什么原因”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2855.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！