vue-cli项目布署问题解决:空白页、静态资源文件404错误、refrenceError:promise未定义(部分浏览器不支持ES6语法)
(前言:文章记录vue-cli项目打包使用IIS布署遇到的几个错误及解决方式)
首先简单理解webpack打包:
个人理解:项目开发中我们构建 "低耦合高内聚" 的组件/模块来代码重用、降低项目复杂性,提升开发效率。而webpack 就是一个静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会通过递归地构建一个依赖关系图,进而将所有所有项目模块打包成一个或多个 bundle.js文件( bundle.js文件不能被浏览器识别,需要使用babel转换器转换成浏览器可识别的js文件),通过webpack打包后的主文件可以找到你项目当中的所有依赖文件。
1、错误:项目打包布署后一片空白
分析原因:打开打包文件 dist/index.html 可以看到,index.html里边的内容都是通过script标签引入的,当打包路径配置错误,打开就会是空白的。
解决方式:
修改打包build配置文件路径,选择打开 config/index.js文件,将build对象中的assetsPublicPath属性值改为 ‘./ ’,目的是使打包后的项目index.html获取到依赖文件,修改后如下图:
注意事项:router/index.js路由配置里边默认模式是hash,如果改成了history模式的话,打开也会是一片空白。如果使用history模式的话,需要你在服务端加一个覆盖所有的情况的候选资源:如果URL匹配不到任何静态资源,则应该返回一个index.html,这个页面就是你app依赖页面。
2、错误:静态资源文件404 NOT Founed
分析原因:项目中出现png、woff、tiff等文件404 NOT Founed,这里以找不到homr_bg.png文件为例分析,可以在项目cmd命令窗口看到打包记录,也可以在dist/static/img 下看到打包文件
检查css文件中对该图片的引用路径出现错误如下图,在服务器根目录获取不到static文件夹,所有文件夹下png 404错误
解决方式:在build/utils文件中的下图所示位置修改 publicPath:属性值为 '../../',如下图,这样打包的样子就变成../../static的样子了,就可以解决我们的问题。
3、错误:refrenceError:promise未定义(部分浏览器不支持ES6语法)
项目布署过程中,chrome内核浏览器下都能正常显示页面,在IE内核浏览器下弹框提示 "refrenceError:promise未定义"
分析原因:低版本浏览器内核版本太低,无法解析 ES2015最新的一些语法。babel是一个js转译器,Babel主要会转换ES6和ES7语句为ES5语句。一般搭建项目时webpack会在最外层配置一个.babelrc文件用于默认解析ES2015(es6)中的特殊语法(例如: let,const,class等),而babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。所以需要使用babel-polyfill
解决方式:安装babel-polyfill
3.1、npm命令安装:
npm install --save-dev babel-polyfill
3.2、在入口main.js文件引入:
import babel-polyfill
3.3、在build文件夹下找到webpack.base.conf.js.修改入口方式:
entry: {app: ["babel-polyfill", "./src/main.js"]},
3.4、再依赖一个插件解决ES6/ES7高级语法兼容:
npm install --save-dev babel-preset-es2015
参考链接:https://blog.csdn.net/webKris/article/details/83625673
vue-cli项目布署问题解决:空白页、静态资源文件404错误、refrenceError:promise未定义(部分浏览器不支持ES6语法)相关推荐
- Vue项目布署后,刷新页面404的真正原因找到了
从一篇日记说起 我是一个小前端,我有写日记的习惯 2020年10月17 天气 晴 今天天气不错,心情也跟着好起来了 辛辛苦苦加班两个星期终于完成了产品需求,到了要上线的时候了,嘴里也不知不觉哼起了&q ...
- element tree不刷新视图_Vue项目布署后,刷新页面404的真正原因找到了
从一篇日记说起 我是一个小前端,我有写日记的习惯 2020年10月17 天气 晴 今天天气不错,心情也跟着好起来了 辛辛苦苦加班两个星期终于完成了产品需求,到了要上线的时候了,嘴里也不知不觉哼起了&q ...
- vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory
问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析 从给出的提示可以看出 ...
- vue cli 项目在打包时候报错解决方法
问题描述 报错一: 打包过程报错:Unexpected token name <i>, expected punc <;> IE浏览中报错:SCRIPT1003: 缺少':', ...
- Vue Cli 项目结构简述
webnode_modules --Vue Cli 项目以来的js模块全放到这里public --存放静态资源 存放自己的js cssfavicon.ico -- 浏览器小图标index.html - ...
- Vue项目9:Vue Cli项目使用echarts可视化
Vue Cli项目使用echarts可视化有两种方式:一.直接引入echarts 二.使用vue-ehcarts. 一.直接引入echarts 1.创建Vue Cli项目 进入cmd命令行,输入如 ...
- tomcat部署项目成功后,访问任何页面都是空白页,不报404异常
tomcat部署项目成功后,访问任何页面都是空白页,不报404异常 项目部署成功: 页面空白: 输入一个错误的地址,也是空白: 原因是设置的CharchaterFilterr过滤器是全局筛选: @We ...
- vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
- vue项目打包之后部署访问静态资源全都404
问题 vue项目npm run build之后打包生成的dist文件夹,部署到服务器上访问静态资源全都404 解决 找到项目的vue.config.js文件 module.exports = {// ...
最新文章
- Study on Android【三】--Intent消息传递
- [Security] Automatically adding CSRF tokens to ajax calls when using jQuery--转
- 线程属性 pthread_attr_t
- mysql数据库前端缓存_什么是MySQL数据库的缓存池原理?看完或许就懂了
- mysql无法添加或更新子行_MySQL无法添加或更新子行
- SharePoint Welcome.ascx 控件自定义样式的另类解决方式
- Netflix工程总监眼中的分类算法:深度学习优先级最低
- gd32 定时器时钟_漫谈LiteOS之开发板-Timer(基于GD32450i-EVAL)
- ajax:dataType
- asterisk queue 队列
- GO随笔-Web简读
- 奔小康赚大钱 HDU - 2255(最大权值匹配 KM板题)
- 10个超实用的小程序,你一定用得到!
- 成果丰硕!SWORD 斯沃德惊艳亮相“第18届深圳名品家博会”
- 电路原理笔记整理_【盛世清北】2021清华大学827电路原理考研笔记-清华考研辅导班...
- ios python 越狱_如何使用Frida绕过iOS应用程序中的越狱检测!!!
- 什么是零知识证明(ZK Proof)?Web2.0通往Web3.0的入口技术
- Vue2积分商城PC端项目(一)
- osgearth处理大tiff文件:利用VPB工具构建静态四叉树,使用osgearth加载成为地形层
- 小学计算机室工作总结范文,小学信息技术教研组的工作总结范文
热门文章
- c++ stl stack_C ++ STL中的stack :: top()函数
- 离散数学和组合数学什么关系_关系类型| 离散数学
- c语言 关键字const_C ++ const关键字| 查找输出程序| 套装1
- 请写出3个Android布局,一起撸一波干货集中营练练手Android(三)布局+实现篇
- mysql 指定数字排序_Mysql数据排序
- python的交互式解释器_python3.4.1解释器python交互式图形编程实例(三)
- lightgbm 保存模型 过大_机器学习之12—Lightgbm
- stl list 删除元素_删除所有出现的元素,并从列表中删除一些特定的元素。 C ++ STL...
- 设置devenv命令的启动版本
- Oracle11完全卸载方法