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

  

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

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搭建项目出现白屏是什么原因”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。

相关文章
前端开发最新文章
热门教程