vue项目打包后打开空白解决办法
2017-09-22 19:11
477 查看
vue项目打包后一片空白解决办法
网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白。这个主要原因是路径的问题。
1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的。先看一下默认的路径。
assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级目录下面。 所以要改为 ‘./ ’
2、另外还需要注意一点。src里边router/index.js路由配置里边默认模式是hash,如果你改成了history模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。如果非要使用history模式的话,需要你在服务端加一个覆盖所有的情况的候选资源:如果URL匹配不到任何静态资源,则应该返回一个index.html,这个页面就是你app依赖页面。
如果不会打包vue项目,请看我写的另外一篇详细教程:Vue webapp项目通过HBulider打包原生APP
网上很多说自己的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中打开项目页面空白的问题解决
- webpack打包vue项目后,一些文件图片路径找不到的问题解决办法
- 利用HBuilder将vue项目打包成移动端app,运行页面空白问题解决
- 解决新版阿里weex框架创建vue项目后打开http://localhost:8080/index.html空白
- Vue 2.0在IE11中打开项目页面空白的问题解决
- “本地连接”找不到 网络文件夹打开是空白的解决办法
- 解决vue项目打包后提示图片文件路径错误的问题
- .chm格式的电子书打开是空白的解决办法
- 关于.net web项目打包安装程序安装过程中出现安装未完成的解决办法
- 解决Vue项目在IE浏览器中显示空白的问题
- 用Android studio 打开项目,文件名都是红色的解决办法
- 在VS2008中打开VS2010项目解决办法
- vue-cli webpack模板项目搭建及打包时路径问题的解决方法
- 关于android studio首次开启项目打开很慢解决办法
- .chm格式的电子书打开是空白的解决办法
- CHM帮助文档打开为空白的解决办法
- Vue2.0做的项目在IE11下面打开一片空白?
- 用VS.NET打开网上下载的.NET web项目出错的解决办法
- MyEclipse修改Web项目名称后无法打开--解决办法