最近在学习使用webpack，在项目最后打包过程，执行npm run build之后得到的dist目录放到服务器上打开，显示空白页面，但是标题能正常显示，查看控制台发现是数据位置请求报错，查阅资料后知道是打包初始目录设置错误，现将解决方法整理如下：

找到webpack配置文件.webpack.js

需要说明，不同的webpack版本或者打包管理器所生成的配置文件名甚至文件位置都可能不一样，不清楚自己项目配置文件位置在哪的可以通过全局搜索publicPath或者assetsPublicPath来找到配置文件。

将publicPath:'/'修改为publicPath:'./'

重新执行`npm run build打包

一般来讲都可以解决问题，如果仍有问题，可以留言一起讨论。

执行npm run build之后显示空白页面的更多相关文章

  1. npm run build 打包后空白页解决问题两种情况

    问题一:assetsPublicPath配置错误 解决办法:打开config/index.js文件 build:{        // assetsPublicPath: '/'        ass ...

  2. vue-electron 使用sqlite3数据库，执行npm run build 报错 .NET Framework 2.0 SDK,Microsoft Visual Studio 2005[C:\temp\wechat\node_modules\sqlite3\build\binding.sln]

    问题描述 vue-electron 使用sqlite3数据库,执行npm run build 报错如下: .NET Framework 2.0 SDK,Microsoft Visual Studio ...

  3. 如何使用 gitlab 或 github 执行npm run build

    一: 如何快速搭建一个组件库 首先,我们介绍一个快速包装组件库的工具:https://github.com/yanhaijing/jslib-base     按照文档来,就简单几步: npx @js ...

  4. vue中执行npm run build报错解决方法？

    遇到了执行npm run build 后报错: [build:js ] Module not found: Error: Can't resolve 'scss-loader' in 'D:\work ...

  5. Vue打包npm run build 打包后空白怎么解决？

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

  6. npm run build 打包后，如何查看效果

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

  7. vue使用npm run build命令打包

    vue使用npm run build命令打包项目   当我们使用vue-cli脚手架完成一个项目的时候,下一步肯定会想要怎么把这个项目放到互联网上或者本地直接打开呢,我们在本地调试的时候只要命令行执行 ...

  8. Electron 桌面应用打包（npm run build）简述(windows + mac)

    最近一段时间在用electron+vue做内部项目的一键构建发布系统的桌面应用,现就其中打包流程写个备注,以示记录. Windows环境打包:1.首先贴一下package.json. { " ...

  9. vue npm run build 失败

    之前删除过 node-moudel 文件夹,然后 npm install 重新安装,一切OK.打包的时候,报错,找不到caniuse什么的.再删除node-moudel,重新cnpm install ...

随机推荐

  1. Appium Python API 中文版

    Appium_Python_Api文档 1.contextscontexts(self): Returns the contexts within the current session. 返回当前会 ...

  2. 论文阅读笔记三十八：Deformable Convolutional Networks（ECCV2017）

    论文源址:https://arxiv.org/abs/1703.06211 开源项目:https://github.com/msracver/Deformable-ConvNets 摘要 卷积神经网络 ...

  3. bootstrap 三个文件的引入

    <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.co ...

  4. 20165206 2017-2018-2 《Java程序设计》第二周学习总结

    20165205 2017-2018-2 <Java程序设计>第一周学习总结 教材学习内容总结 java语言共有8种基本数据类型,分别是boolean.byte.short.char.in ...

  5. Dom,查找标签和操作标签

    Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...

  6. Java开发环境笔记

    在配置环境变量中 设置Java_home: 一是为了方便引用,比如,jdk安装在c:\jdk16.0目录里,则设置java_home为该目录路径,那么以后要使用这个路径的时候,只需输入%java_ho ...

  7. [转]sqlplus /nolog 出错解决 SP2-0667: Message file sp1<lang>.msb not found SP2-0750: You may need to set ORACLE_HOME to your Oracle software directory

    http://techxploration.blogspot.com/2012/01/resolving-sp2-0750-you-may-need-to-set.html Resolving SP2 ...

  8. window上安装zabbix agent使用案例

    下载对应的zabbix windows版本 因为zabbix server使用的版本为3.2.0版本 所以下载window 3.2的版本 https://www.zabbix.com/download ...

  9. python---读取/写入excel用例数据

    使用excel管理用例 ①.读取excel的用例数据,每一类参数保存在list中返回:②.那么接下来使用unitest编写用例时,可以去调用这个函数.使用里面的数据: 个人认为好处是,大部分人还是习惯 ...

  10. jQuery Validate自定义错误信息,自定义方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...