vue打包后出示空白正确处理方法,vue项目在安卓低版本机显示空白原因

By admin in 4858美高梅 on 2019年4月9日

vue项目在安卓低版本机呈现空白原因:

近期用vue-cli+vue-router+webpack建立项目,当中的相遇的八个难题,整理如下:

前言

在类型中众多时候必要用到vue打包成html不供给放在服务器上就能浏览。遵照官网打包出来的html直接打开是显得空白。

想必的原委1:

vue-cli+ webpack 建立的花色,cnpm run build
打包项目事后,要求放在http服务器上才得以运作,

因为做事的急需,学习Vue贰.0也有一段时间,近来在用Vue二.0的官方脚手架工具创设的项目,chrome中跑一直没不通常,但ie1一开辟出现了bug:

vue打包后显示空白正确处理方法是

翻开安卓debug,报错,可能有箭头函数语法错误,恐怕其余语法难题,这恐怕是ES六语法难点。

例如 :nginx

问题

vue打包后出示空白正确处理方法,vue项目在安卓低版本机显示空白原因。一、找到配置文件

那时须要安装babel-pollyfill。

vue单页面包车型客车开发银行页面是index.html,路由的门道实际上是不设有的,所以会出现刷新页面404的题材,须求安装富有找不到的路子间接照射到index.html

ie1壹开辟vue2.0品类空白,控制台报错
vuex requires a Promise polyfill in this browser;

4858美高梅 1

网上找到方法如下:

一 刷新页面40四

原因

修改

4858美高梅 2

贝布el 暗中同意只转换新的 JavaScript 句法(syntax),而不转移新的 API ,比如
Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise
等全局对象,以及一些概念在大局对象上的主意(比如
Object.assign)都不会转码。为了缓解这几个难题,我们选择壹种叫做
Polyfill(代码填充,也可译作包容性补丁) 的技能。

4858美高梅 3

1.安装babel-polyfill和es6-promise

npm i babel-polyfill --save
npm i es6-promise --save
2.main.js引入

import ‘babel-polyfill‘
import Es6Promise from ‘es6-promise‘
Es6Promise.polyfill()
3.webpack.base.conf.js

module.exports = {
entry: {
  "babel-polyfill":"babel-polyfill",
   app: ‘./src/main.js‘   //原本只有这一行
}

配备运营文件的index页面包车型客车路径root:
D:/workPlace/mex-adx-web/mex-adx-web/dist

不难地说,polyfill便是在近期运作条件中用来复制(意指模拟性的复制,而不是拷贝)尚不存在的原生
api 的代码。

4858美高梅,这么打包处理能够打开但是页面样式会找不到

这儿借使安卓机依然环堵萧然打不开,继续翻看原因二

二 二级页面刷新报错:

解决

2、修改

大概的缘由2:

包裹的类型静态财富的途径要求安装为绝对路径。假诺是绝对路径会出错

安装babel-polyfill

4858美高梅 4

查看npm run
build打包之后有未有包装报错,有时间部分小功用大概不影响页面呈现和选择,可是打包也报错了,我们兴许就马虎了,只要打包有报错,安卓就决然不可能健康显示,不像浏览器,笔者这里看到的报错是

config-index.js

步骤

4858美高梅 5

4858美高梅 6

4858美高梅 7

npm安装

找到相应的地方加上publicPath: '../../' 然后就成功了!

 

3:项目周转未有反常态,可是打包之后运维文件报错

npm install --save-dev babel-polyfill

广大爱人还碰着这么的题材
vue打包后index文件一片空白,怎么回事呢?

4858美高梅 8

Unexpected token:`。。。

在输入文件倒入即可

 vue项目你npm run build打包后,点开index文件打开一片空白,

发觉报错的岗位是在router文件夹下的index.js文件中 
 分别是用了es六对象的统一,和模版字符串,那时候只要求去webpack.base.conf.js中

必要独自安顿babel,将布置放到文件.babelrc中:

import 'babel-polyfill'

并报错化解办法:路径难点,

{
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          resolve('src'),//表示在src目录下的js需要编译
        ],
 },

4858美高梅 9

假使也是用了法定脚手架vue-cli,还亟需在webpack.config.js配置文件中做各修改,用

总结

加3个include,resolve 
router所在目录即可,假设那里一向写路径,会不起功用。

如上那篇vue+webpack 打包文件 40四页面空白的缓解措施正是作者分享给大家的全体内容了,希望能给我们一个参阅,也盼望大家多多帮衬脚本之家。

module.exports = {
 entry: {
 app: ["babel-polyfill", "./src/main.js"]
 }
};

以上所述是我给大家介绍的vue打包后显得空白正确处理方法,希望对我们有着援助,借使大家有任何疑问请给自家留言,小编会及时恢复生机我们的。在此也分外多谢我们对台本之家网址的支撑!

 

你大概感兴趣的稿子:

  • 详解vue中式点心击空白处隐藏div的落实(用命令达成)
  • vue打包后展现空白正确处理方法
  • Vue
    二.0在IE1第11中学开辟项目页面空白的题材消除
  • vue项目在安卓低版本机显示空白的因由剖析(二种)

替换

您大概感兴趣的小说:

  • 详解vue中式点心击空白处隐藏div的达成(用命令达成)
  • vue+webpack 打包文件 404页面空白的缓解方法
  • Vue
    二.0在IE1第11中学打开项目页面空白的题材化解
  • vue项目在安卓低版本机展现空白的来头分析(三种)
module.exports = {
 entry: {
 app: './src/main.js'
}
}

总结

好了,难题到那就化解了,以上正是那篇小说的全部内容,希望本文的始末对大家的读书也许工作能拉动一定的帮忙,借使有疑难大家能够留言沟通,感谢大家对剧本之家的协理。

您恐怕感兴趣的稿子:

  • 详解vue中式点心击空白处隐藏div的落到实处(用命令完成)
  • vue+webpack 打包文件 40四页面空白的缓解形式
  • vue打包后显得空白正确处理方法
  • vue项目在安卓低版本机展现空白的来头分析(二种)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有