网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。

1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。

assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级目录下面。 所以要改为 ‘./ ’。

当资源引入的路径报错

assetsSubDirectory默认的是 ‘static’ 也就是根目录。而我们的index.html和static在同一级目录下面。 所以要改为 ‘./static ’。

vue项目打包后一片空白及资源引入的路径报错解决办法的更多相关文章

  1. Vue项目中使用webpack配置了别名，引入的时候报错

    chainWebpack(config) { config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('src/as ...

  2. vue项目打包后运行报错400如何解决

    昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...

  3. vue项目打包后想发布在apache www/vue 目录下

    使用的是vue-element-admin做示例,可以参考Vue项目根据不同运行环境打包项目,其他项目应该大同小异. 使用vue-router的browserHistory模式,配置mode: 'hi ...

  4. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  5. Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...

  6. create-react-app创建项目后运行npm run eject命令报错解决办法

    最近在用create-react-app创建项目,因要配置各种组件,比如babel,antd等, 需要运行npm run eject命令把项目的配置文件暴露出来,但是还是一如既然碰到报错,因为是在本地 ...

  7. vue项目打包后在IE浏览器报错,页面显示空白

    之前写一个项目,一直放在谷歌浏览器调试测试,到尾声时放到IE浏览器结果直接白屏,页面打不开 找了网上的方法,加了babel-polyfill插件后还是不行,后来排查发现是打包插件出了问题,因为用的项目 ...

  8. vue项目打包后css背景图路径不对的问题

    问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...

  9. vue项目打包后路径出错

    安装完vue后搭建了一个项目,直接执行 npm run dev 是可以正常打开页面的: 但是执行 npm run build 打包项目后打开却报错了,如下: 原来是项目中的静态文件路径报错了... 然 ...

随机推荐

  1. Java 迭代器综述

    一.摘要 迭代器模式是与集合共生共死的.一般来说.我们仅仅要实现一个容器,就须要同一时候提供这个容器的迭代器.使用迭代器的优点是:封装容器的内部实现细节,对于不同的集合,能够提供统一的遍历方式,简化c ...

  2. iOS蓝色和黄色文件夹新建方式区别(区别之前)

    关于这个问题,好像xcode9之前还是多少来着,创建方式是这样: 1.New Group创建的黄色文件夹是“假”文件夹,也就是说 show in finder 是看不到的 解释:这个文件夹并不是真正的 ...

  3. ceph 底层代码分享

    一.底层工作队列 二.对象操作 三.上下文(Context)代码分析:

  4. CentOS下如何查看并杀死僵尸进程

    昨天服务器到期,之前的服务器由于空间小,不能满足现在的服务要求,就新购买了一个服务器,目前正在调试安装中! 在调试过程中,发现系统中有很多僵尸进程,现在就是找出这些僵尸进程,并将其杀死. 用top查看 ...

  5. xmind指定32位jdk解决在64位系统上不能启动的问题

    在xmind.ini文件的第一行添加下面的内容: -vmF:\kfgj\Java32.1.6\jdk1.6.0_16\bin\javaw.exe (根据实际情况指定32位jdk的javaw.exe文件 ...

  6. javascript es6 箭头函数

    1.箭头函数示例 let add = (a,b) => a + b         //没有语句块时,默认作为返回值 add(1,2); var multi = (a,b) => {ret ...

  7. 第三部分：Android 应用程序接口指南---第二节：UI---第九章 搜索

    第9章 搜索 在android平台上搜索是一个核心的用户功能.无论内容位于设备或网络上,用户应该能够搜索任何对它们可用的数据.为了创建一个一致的用户搜索体验,Android平台提供了一个搜索框架帮助你 ...

  8. linux每日命令(11)：cat命令

    cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用. 一．命令格式: cat [参数] [文件] ...

  9. openfire接收离线消息

    先接收离线消息后再通知openfire上线 //获取离线消息 OfflineMessageManager offlineMessageManager=new OfflineMessageManager ...

  10. Java知多少（21）this关键字详解

    this 关键字用来表示当前对象本身,或当前类的一个实例,通过 this 可以调用本对象的所有方法和属性.例如: public class Demo{ public int x = 10; publi ...