最近在学习使用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. 阿里云人脸识别测试接口出错 返回Body：{ "errno": 1031, "err_msg": "Invalid Image URL.", "request_id": "cdbe2927-e1bb-4eb1-a603-8fcd4b0b7fc8" }

    错误信息如下 返回Body:{ "errno": 1031, "err_msg": "Invalid Image URL.", " ...

  2. JSON数据写入和解析

    如何写入JSON 需要第三方jar包,JSON包 //写入json数据 public static String sendJson() { JSONObject json = new JSONObje ...

  3. js cookie 工具

    var CookieUtil = { get: function(name) { var cookieName = encodeURIComponent(name) + "=", ...

  4. DOM对象，控制HTML元素

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 节点属性: 遍历 ...

  5. nginx配置http和https共存

    server { listen ; listen ssl; server_name localhost; #ssl on; ssl_certificate /usr/local/Tengine/ssl ...

  6. [转]Tor Browser在国内Windows平台下的超详细教程

    https://cloudfra.com/tor-browser-windows.html 下载与安装 首先,你必须身处科学式网络(实在怕网站再出问题),接着就可以点击打开Tor Browser官网, ...

  7. 解决 Ionic 浏览器跨域问题

    <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Contro ...

  8. Codeforces 922F Divisibility 构造

    Divisibility 我们考虑删数字 首先我们可以发现有一类数很特殊就是大于 n / 2的素数, 因为这些素数的贡献只有1, 并且在n大的时候, 这些素数的个数不是很少, 我们可以最后用这些数去调 ...

  9. Python 类的内置方法

    #!/usr/bin/env python # -*- coding:utf-8 -*- # 作者:Presley # 邮箱:1209989516@qq.com # 时间:2018-11-04 # p ...

  10. IDEA链接mySql问题 : You have an error in your SQL syntax : 'OPTION SQL_SELECT_LIMIT=1000' （or 'OPTION SQL_SELECT_LIMIT=DEFAULT'）

    IDEA控制台错误信息: check the manual that corresponds to your MySQL server version for the right Code: 1064 ...