您的位置:时时app平台注册网站 > web前端 > vue webpack 打包文件 404 页面空白的消除措施【彩世

vue webpack 打包文件 404 页面空白的消除措施【彩世

2019-11-14 20:56

查看npm run build打包之后有没有打包报错,有时间一些小功能可能不影响页面展示和使用,但是打包也报错了,我们可能就忽略了,只要打包有报错,安卓就一定不能正常显示,不像浏览器,我这里看到的报错是

打包的项目静态资源的路径需要设置为绝对路径。如果是相对路径会出错

解决

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‘   //原本只有这一行
}

vue-cli webpack 建立的项目,cnpm run build 打包项目之后,需要放在http服务器上才可以运行,

前言

网上找到方法如下:

配置启动文件的index页面的路径root: D:/workPlace/mex-adx-web/mex-adx-web/dist

问题

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

例如 :nginx

如果也是用了官方脚手架vue-cli,还需要在webpack.config.js配置文件中做各修改,用

可能的原因一:

3 :项目运行没有问题,但是打包之后运行文件报错

module.exports = {
 entry: {
 app: './src/main.js'
}
}

彩世界网址 1

vue单页面的启动页面是index.html,路由的路径实际是不存在的,所以会出现刷新页面404的问题,需要设置所有找不到的路径直接映射到index.html

ie11打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in this browser;

 

以上这篇vue webpack 打包文件 404 页面空白的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

import 'babel-polyfill'

这时如果安卓机依然空白打不开,继续查看原因二

需要单独配置babel,将配置放到文件.babelrc中:

在入口文件倒入即可

加一个include,resolve  router所在目录即可,如果这里直接写路径,会不起作用。

2 二级页面刷新报错:

您可能感兴趣的文章:

  • 详解vue中点击空白处隐藏div的实现(用指令实现)
  • vue webpack 打包文件 404 页面空白的解决方法
  • vue打包后显示空白正确处理方法
  • vue项目在安卓低版本机显示空白的原因分析(两种)

可能的原因二:

1 刷新页面404

原因

vue项目在安卓低版本机显示空白原因:

最近用vue-cli vue-router webpack建立项目,其中的遇到的三个问题,整理如下:

好了,问题到这就解决了,以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

彩世界网址 2

config-index.js

安装babel-polyfill

彩世界网址 3

简单地说,polyfill即是在当前运行环境中用来复制(意指模拟性的复制,而不是拷贝)尚不存在的原生 api 的代码。

这时候需要安装babel-pollyfill。

彩世界网址 4

npm install --save-dev babel-polyfill

发现报错的位置是在router文件夹下的index.js文件中   分别是用了es6对象的合并,和模版字符串,这时候只需要去webpack.base.conf.js中

Unexpected token:`。。。

替换

 

您可能感兴趣的文章:

  • 详解vue中点击空白处隐藏div的实现(用指令实现)
  • vue打包后显示空白正确处理方法
  • Vue 2.0在IE11中打开项目页面空白的问题解决
  • vue项目在安卓低版本机显示空白的原因分析(两种)

npm安装

查看安卓debug,报错,可能有箭头函数语法错误,或者其他语法问题,那可能是ES6语法问题。

彩世界网址 5

因为工作的需要,学习Vue2.0也有一段时间,最近在用Vue2.0的官方脚手架工具构建的项目,chrome中跑一直没有问题,但ie11打开出现了bug:

步骤

总结

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

Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。为了解决这个问题,我们使用一种叫做 Polyfill(代码填充,也可译作兼容性补丁) 的技术。

本文由时时app平台注册网站发布于web前端,转载请注明出处:vue webpack 打包文件 404 页面空白的消除措施【彩世

关键词: