问题一:assetsPublicPath配置错误

解决办法:打开config/index.js文件

build:{
        // assetsPublicPath: '/'
        assetsPublicPath: './'
    }

问题二:路由history模式配置有误
router/index.js
解决办法:关闭路由historym模式

export default new Router({
      // mode: 'history', // require service support
      scrollBehavior: () => ({
        y: 0
      }),
      routes: constantRouterMap
    })

执行npm run build之后显示空白页面

阅读数 2858

最近在学习使用webpack,在项目最后打包过程,执行npmrunbuild之后得到的dist目录放到服务器上打开,显示空白页面,但是标题能正常显示,查看控制台发现是数据位置请求报错,查阅资料后知道是... 博文
来自: YooHoeh的博客
关于reactjs在windows环境中使用npm run build之后,打开网页显示为空白的解决方案

npm run build 打包后空白页解决问题两种情况的更多相关文章

  1. Vue打包npm run build 打包后空白怎么解决?

    问题一:路径报错并且页面空白 解决:buld/index.js      assetsPublicPath: '/'修改为 assetsPublicPath: './' 问题二:没报错页面空白  ro ...

  2. npm run build 打包后,如何运行在本地查看效果(Nginx服务)

    这段时间,研究了一下vue 打包的很慢的问题.但是当我 npm run build 打包后,在本地查看效果的时候,活生生被我老大鄙视了,因为我打开了XAMPP.他说:你怎么不用Nginx啊?用这个一堆 ...

  3. 关于npm run build打包后css样式中的图片失效的问题(如background)

    平时run dev都能正常显示的css背景图片在npm run build打包后竟然不显示了(写在标签对中的图片都可以正常显示),而且dist/static/img目录下是确实有这张图片的,于是查看打 ...

  4. npm run build打包后自定义动画没有执行

    问题描述:在vue项目中,当你自己写了一些自定义动画效果,然后你npm run build打包项目放到线上环境后,发现动画并没有效果. 解决办法:在vue项目中找到build文件夹下的vue-load ...

  5. npm run build 打包后,如何查看效果

    我们用vue-cli搭建的项目执行npm build后本地打开页面空白,如果才能查看npm run build之后的结果呢 首先我们看一下提示 Tip: built files are meant t ...

  6. npm run build 打包后(直接打包白屏),如何运行在本地查看效果(Apache服务)

    转载: https://www.cnblogs.com/qiu-Ann/p/7477593.html 目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端 ...

  7. npm run build 打包后,如何运行在本地查看效果(Apache服务)

    目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试.项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试 ...

  8. npm run build 打包后,如何运行在本地查看效果

    目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试.项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试 ...

  9. 执行npm run build之后显示空白页面

    最近在学习使用webpack,在项目最后打包过程,执行npm run build之后得到的dist目录放到服务器上打开,显示空白页面,但是标题能正常显示,查看控制台发现是数据位置请求报错,查阅资料后知 ...

随机推荐

  1. centos7.2 部署k8s集群

    一.背景 二.使用范围 ♦ 测试环境及实验环境 三.安装前说明 ♦ k8s网络基本概念 ♦  集群规划图 ♦ 软件版本选取 Name Version Description docker-ce 18. ...

  2. 手把手教你用C#做疫情传播仿真

    手把手教你用C#做疫情传播仿真 在上篇文章中,我介绍了用C#做的疫情传播仿真程序的使用和配置,演示了其运行效果,但没有着重讲其中的代码. 今天我将抽丝剥茧,手把手分析程序的架构,以及妙趣横生的细节. ...

  3. 初识Redis,看这一篇就够了

    环境的搭建和安装网上有很多教程,在这里就不再重复了. 1. Redis是什么? Redis(全称:Remote Dictionary Server 远程字典服务)是一个开源的使用ANSI C语言编写. ...

  4. c和c++中读取数据的方式总结

    目录 c 输出 printf() 输入 scanf getchar(), putchar() gets(), puts() c++ 输入 cin() getline() get() 输出 cout 最 ...

  5. javase第一章(了解java)

    ------------恢复内容开始------------ java介绍 java这门语言,如果你是一名IT从业者,那么就一定是会有所耳闻的,毕竟,这是编程史上其商业化最成功的一门语言,当然, 编程 ...

  6. LinearLayout中组件右对齐

    在LinearLayout中,如果将其定位方向设为横向排列:android:orientation="horizontal",那么这个布局中的控件将自左向右排列. 但有时会有这样的 ...

  7. edltplus使用正则表达式替换多余空行

    24-7 <font style="font-weight:bold;">24-7</font><div class="tab_conten ...

  8. HDU_1394_线段树

    http://acm.hdu.edu.cn/showproblem.php?pid=1394 线段树入门题,每次读入一个数,就寻找在树中比它大的值的个数,然后更新树,把个数相加就是逆序数,每移动一个数 ...

  9. 关于JAVA中源码级注解的编写及使用

    一.注解简介: 1.1.什么是"注解": ​ 在我们编写代码时,一定看到过这样的代码: class Student { private String name; @Override ...

  10. Java DTO(data transfer object)的理解

    首先明白springboot每层 model层 model层即数据库实体层,也被称为entity层,pojo层. 一般数据库一张表对应一个实体类,类属性同表字段一一对应. Model层是数据层: Ta ...