问题一: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. HTML简介介绍

    网页概述 网页:纯文本格式的文件:(以村文本格式编写,后缀名改为HTML的文本文件) ---- 网站:多个网页的集合: ---- 主页:打开网站后显示的第一个页面: ---- 浏览器:将纯文本格式的文 ...

  2. #使用abp框架与vue一步一步写我是月老的小工具(2) 后台搭建初体验

    #使用abp框架与vue一步一步写我是月老的小工具(2) 后台搭建初体验 一.续上前言 关于这个小玩意的产品思考,假设我暂时把他叫我是月老热心人 这是一个没有中心的关系链,每个人进入以后都是以自己为中 ...

  3. 《快乐编程大本营》java语言训练班 1课:第一个java程序:你好,范冰冰;

    1Java介绍 2安装java环境JDK 3安装web环境tomcat 4安装开发工具Idea2017 5编写第一个程序 ‘你好,范冰冰!’ 地址: http://code6g.com 1.Java介 ...

  4. python学习记录(五)

    20180829--https://www.cnblogs.com/fnng/archive/2013/04/20/3032563.html 字典 字典的使用 现实中的字段及在Python中的字段都进 ...

  5. Linux系统基础认知

    什么是操作系统? 操作系统作为接口的示意图: 没有安装操作系统的计算机,通常被称为裸机 如果想在 裸机 上运行自己所编写的程序,就必须用机器语言书写程序 如果计算机上安装了操作系统,就可以在操作系统上 ...

  6. 编程思想(POP,OOP,SOA,AOP)

    1)POP--面向过程编程(Process-oriented programming ): 面向过程编程是以功能为中心来进行思考和组织的一种编程方法,它强调的是系统的数据被加工和处理的过程,在程序设计 ...

  7. 「硬核干货」总结IDEA开发的26个常用设置

    前言 程序员对待IDE都是虔诚的,经常因为谁是最好的IDE而在江湖上掀起波澜,曾经我也是. 后来我遇到了IDEA,从此是它,余生都是它. IDEA 毫无疑问是目前最强大的Java开发工具了,但是大部分 ...

  8. 《N诺机试指南》(七)排版类问题

    1.菱形问题: 解析: 主要通过打印空格和星形来打印整个图形,将整体分为=上三角形+下三角形 首先观察上三角形可以发现:第一行2个空格1个星.第二行1个空格3个星.第三行0个空格5个星     空格数 ...

  9. PyObject and PyTypeObject - Python 中的 '对象' 们

    1 PyObject, PyTypeObject - Python 中的 '对象' 们 '一切皆对象' - 这是 Python 的学习和使用者们最最常听到一句, 可谓 博大精深 - '勃大精深'. ' ...

  10. wp8.1 学习笔记 001 动态生成图片 并更改图片位置

    1.在xaml中划分表格 <Grid Name="gr"> <Grid.ColumnDefinitions> <ColumnDefinition> ...