vue项目打包后打开空白解决办法

5人阅读 评论(0) 收藏 举报
分类:

vue项目打包后一片空白解决办法

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

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

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true,

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

2、另外还需要注意一点。src里边router/index.js路由配置里边默认模式是hash,如果你改成了history模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。如果非要使用history模式的话,需要你在服务端加一个覆盖所有的情况的候选资源:如果URL匹配不到任何静态资源,则应该返回一个index.html,这个页面就是你app依赖页面。

// mode: 'history'  // 默认hash

如果不会打包vue项目,请看我写的另外一篇详细教程:Vue webapp项目通过HBulider打包原生APP

查看评论

VUE构建工具

随着vue2.0的发布,本课程以 vue1.0 和 webpack 为基础,主要讲解项目的构建的,涉及到的vue-router和vuex,课程中带领帮助学员快速过渡到vue 2.0上,最后一个商业实战源码的案例分析。课程紧凑,严密,风趣幽默。
  • 2016年11月08日 13:13

vue项目打包后一片空白

修改在config文件夹下面的index.js中build模块导出的路径,assetsPublicPath默认的是'/',也就是根目录。而index.html和static在同一级目录下面,所以改为'...
  • luodao_
  • luodao_
  • 2018-01-19 11:34:48
  • 207

vue打包后index文件一片空白

vue项目你npm run build打包后,点开index文件打开一片空白, 并报错解决方法:路径问题,...
  • github_38469586
  • github_38469586
  • 2017-07-25 20:41:25
  • 1889

利用HBuilder将vue项目打包成移动端app,运行页面空白问题解决

这里说一下问题所在打包后的dist文件夹我们是通过httpserver的命令运行的hs -o -p 9999(任意端口号)执行这条命令,在浏览器中就能正常访问,访问的地址是http://localho...
  • u012086400
  • u012086400
  • 2017-12-12 10:34:44
  • 1112

webpack打包vue 部署后空白页 图片不显示

新建一个vue webpack项目打包上传服务器后是空白页,文字和图片就不显示。通过浏览器审查模式,在路径前加个“.”就可以了,说明是路径不对一:页面路径在项目根目录下的config文件夹下的inde...
  • m0_37975886
  • m0_37975886
  • 2018-03-21 14:46:43
  • 95

vue项目打包后一片空白解决办法

网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白。这个主要原因是路径的问题。1、记得改一下config下面的index.js中bul...
  • qq_40963664
  • qq_40963664
  • 2018-04-10 09:38:40
  • 44

vue打包后有的手机安装后页面显示空白,请教原因

安卓5.1没问题,安卓5.11的手机没显示出来
  • qq_40251758
  • qq_40251758
  • 2018-01-10 11:40:29
  • 787

vue-cli构建项目 npm run build打包后怎么在本地查看效果

点击查看原文 本文以vue官方脚手架vue-cli构建的项目为例。 运行npm run dev以开发模式打开调试好了你的案例程序;你还不满足于仅仅把代码放在github上,想把项目打包,然后在本地...
  • u013400682
  • u013400682
  • 2017-08-09 18:06:56
  • 1800

vue项目通过webpack打包生成的dist文件放到express里边运行(vue+webpack+express)

通过Vue渐进式框架写了一个项目,项目写完后,通过npm run bulid 生成上线文件dist。但是在运行npm run bulid这条命令的 时候居然报错, 提示我什么缺少bulid,打开p...
  • wang1006008051
  • wang1006008051
  • 2017-09-21 18:53:24
  • 1051
    个人资料
    持之以恒
    等级:
    访问量: 42万+
    积分: 6345
    排名: 4851
    技术交流
    QQ联系方式:326202439
    最新评论