当前位置: 移动技术网 > IT编程>脚本编程>vue.js > vue项目打包后打开页面空白解决办法

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

2018年08月06日  | 移动技术网IT编程  | 我要评论

泰宁县人民政府网,以茶汤颜色作为分类标志的基本茶类是哪几类,马馨月

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

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

module.exports = {
 build: {
 env: require('./prod.env'),
 index: path.resolve(__dirname, '../dist/'),
 assetsroot: path.resolve(__dirname, '../dist'),
 assetssubdirectory: 'static',
 assetspublicpath: '/',
 productionsourcemap: true,

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网