韦德国际1946英国 > 计算机网络 > vue项目打包后打开页面空白解决办法,Vue下路由

原标题:vue项目打包后打开页面空白解决办法,Vue下路由

浏览次数:96 时间:2019-07-28

上述就是本文的全体内容,希望对我们的读书抱有援救,也盼望我们多多扶助脚本之家。

如上就是本文的全部内容,希望对大家的读书抱有援助,也可望我们多多协助脚本之家。

本条base即为项目路线.

假使不会打包vue项目,请看本人写的其余一篇详细教程:Vue webapp项目经过HBulider打包原生应用软件

3、在HB中开采那个dist,可以看出有叁个manifest.json的文本。这一个文件是用来安插利用消息的。入口文件必需要对应好,小编用VUE写的单页应用,所以就四个index.html。

您可能感兴趣的稿子:

  • vue webpack 打包文件 404 页面空白的缓慢解决格局
  • Vue 2.0在IE11中开荒项目页面空白的难点消除

你只怕感兴趣的稿子:

  • Vue下路由History模式打包后页面空白的解决格局
  • vue webpack 打包文件 404 页面空白的化解方式
  • vue打包后显示空白正确管理方法

2、张开HBulider,展开目录,选用那么些list,项目名称本人改造。(或然直接新建叁个app项目,然后把里面包车型大巴unpackage和manifest这四个保留下来,别的的替换到自个儿dist文件里边的从头到尾的经过)

vue的路由在暗许的hash情势下,暗中认可打包一般不会有怎样难题,然而hash情势由于url会蕴藏叁个#,不雅观,并且在微信分享,授权登陆等都会有局地坑.所以history方式也有一部分应用场景.新手往往会遇上history情势打包后页面一片空白的情况,何况没有能源加载错误的报错新闻.

互连网海人民广播广播台湾大学说自个儿的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手提式有线电话机张开一片空白。那几个入眼原因是路线的标题。

接下来配置Logo

// base: '/history',
// mode: 'history',

1、记得改一下config下边包车型客车index.js中bulid模块导出的门路。因为index.html里边的内容皆以通过script标签引进的,而你的路径不对,打开自然是一穷二白的。先看一下私下认可的门路。

图片 1

 location / {
 try_files $uri $uri/ /index.html;
}

2、别的还供给留神一点。src里边router/index.js路由安插内部暗许形式是hash,若是你改成了history形式以来,展开也会是一片空白。所以改为hash或许直接把形式配置删除,让它暗中同意的就行 。纵然非要使用history方式以来,必要你在劳务端加三个蒙面全数的情形的候选财富:借使UXC90L相配不到其余静态资源,则应该回到三个index.html,这一个页面便是您app信赖页面。

图片 2

上述四个都化解了,依然会发觉,此时唯有首页能访谈,通过首页点进去其余路由也是能够的,但是若是在其余路由刷新就有错误了,这些懂history格局的也理应精晓,history方式是h5 api的 history.pushState,相对于是浏览器模拟了一条历史,而实在服务器上从不那一个路子财富,为何hash情势不设有那个标题啊?hash方式是带#,这些服务器不会深入分析,相对于如故回到html而已,index.html会基于vue路由去解析,而history方式则会呈请服务器上的此地址,服务器上尚未相关路径就能够报错了,vue-router的法定文书档案有介绍各个配置,比方ngnix的安插

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

Vue webapp项目经过HBulider打包原生APP

下面那个是项目路径名称为history,那样安排后就不会有vue打包后页面空白难点了,history路由也可以自由访谈了,可是要记得上面说的,非根目录的项目需求增多base 的路线

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

别的还索要小心一点。src里边router/index.js路由安插内部暗中认可格局是hash,假诺您改成了history方式以来,张开也会是一片空白。所以改为hash只怕直接把形式配置删除,让它暗中同意的就行 。

vue项目打包后打开页面空白解决办法,Vue下路由History模式打包后页面空白的解决方法。上述正是本文的全部内容,希望对大家的学习抱有扶助,也盼望大家多多辅助脚本之家。

assetsPublicPath暗许的是  ‘/'  约等于根目录。而作者辈的index.html和static在同一流目录下边。  所以要改为  ‘./ '

assetsPublicPath暗许的是  ‘/'  也正是根目录。而小编辈的index.html和static在同超级目录上边。  所以要改为  ‘./ '

以此实际留意研商下会发掘,就算项目平素放的跟目录, 那么是从未有过难题的,若是是子目录,那么就能一片空白了.这几个vue官方有表明,必要加贰个base

图片 3

地点这几个对于一向项指标根目录是能够的,可是一旦项目不是根目录照旧会有难题,

以此时候是web项目,须要改为应用程式项目(假如间接新建的app,请忽略此步)

location /history {
   root C:/web/static;
 index index.html index.htm;
 #error_page 404 /history/index.html;
 if (!-e $request_filename) {
  rewrite ^/(.*) /history/index.html last;
  break;
 }
}

图片 4

本文由韦德国际1946英国发布于计算机网络,转载请注明出处:vue项目打包后打开页面空白解决办法,Vue下路由

关键词:

上一篇:php7协程详解,PHP7下协程的实现方法详解

下一篇:没有了