最近在学习使用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. 俺也会刷机啦--windows7下刷android

    刷机很多人都会,本文只为像我这种入门的朋友而写的. 风险提示: 1. SD卡数据极可能会丢失(我这次就全丢了). 2. 升级失败. (俺的)环境说明: windows7 专业版64位 cmd命令行工具 ...

  2. 饮冰三年-人工智能-Python-12之利其器pycharm

    1:下载.安装.与激活这里不再介绍了.需要注意的是激活时需要修改C:\Windows\System32\drivers\etc\hosts文件 2:工具使用 2.1 HelloWorld  File& ...

  3. mybatis 遍历map;

    mybatis 遍历map; 参考http://blog.csdn.net/hj7jay/article/details/78652050 ps: ${m[key]}这是显示 打印的key读value ...

  4. Git的常见基础操作命令

    Git的常见基础操作命令 1安装初始化 1.1安装git本地安装Windows版本 下载地址: https://git-scm.com/downloads/ 1.2初始化Git用户信息配置 配置git ...

  5. [转] Webpack的devtool和source maps

    source maps Webpack打包生成的.map后缀文件,使得我们的开发调试更加方便,它能帮助我们链接到断点对应的源代码的位置进行调试(//# souceURL),而devtool就是用来指定 ...

  6. JMeter中BeanShell断言使用一

    Jmeter Ant Task如何让beanshell断言失败的详细信息展示在report里面 首先必须给beanshell断言添加FailureMessage if(${TotalClient_SS ...

  7. 今天开始学习php，粘一些重点放这以便查看记忆。

    1.PHP的变量用$定义. PHP 将所有全局变量存储在一个名为 $GLOBALS[index] 的数组中. index 保存变量的名称.这个数组可以在函数内部访问,也可以直接用来更新全局变量. 2. ...

  8. fillder--信息面板展示serverIP

    1.Ctrl+R打开面板 2.如上图的位置,加上一句后,重启Fillder即可 FiddlerObject.UI.lvSessions.AddBoundColumn(, "X-HostIP& ...

  9. laravel 错误 1071 Specified key was too long; max key length is 1000 bytes

    laravel 执行 php artisan migrate 安装数据库报 1071 Specified key was too long; max key length is 1000 bytes ...

  10. BigInteger的使用

    [构造方法] BigInteger(String val) :将 BigInteger 的十进制字符串表示形式转换为 BigInteger. [常用方法] 1)add(BigInteger val): ...