vue项目打包后打开页面空白解决办法
2018-06-29 10:28
1096 查看
网上很多说自己的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项目打包后打开空白解决办法
- Vue 2.0在IE11中打开项目页面空白的问题解决
- 利用HBuilder将vue项目打包成移动端app,运行页面空白问题解决
- Vue 2.0在IE11中打开项目页面空白的问题解决
- DEDECMS5.3所有PHP页面和后台打开全部空白的解决办法
- VSCode打开vue项目的vue组件提示错误的解决办法及key属性的作用
- webpack打包vue项目后,一些文件图片路径找不到的问题解决办法
- 解决新版阿里weex框架创建vue项目后打开http://localhost:8080/index.html空白
- vuex + sessionstorage 解决vue项目刷新后页面空白/数据丢失
- Vue 2.0在IE11中打开项目页面空白的问题
- VUE 2.0在IE中打开页面空白的原因及解决方法
- 解决vue 打包发布去#和页面空白的问题
- vue+webpack 打包文件 404 页面空白的解决方法
- Vue通过build打包后 打开index.html页面是空白的
- Vue下路由History模式打包后页面空白的解决方法
- 用window.showModalDialog()打开一个新窗口,但是提交的时候会打开一个新页面解决办法
- Mavan打包项目报错以及解决办法。
- Vue 项目打包时部分 MINT-UI 的 ES6 代码未转换成 ES5 的 BUG 的解决
- 关于.net web项目打包安装程序安装过程中出现安装未完成的解决办法
- Android Studio在打开项目是一直处于building gradle project info的解决办法