vue-cli项目布署问题解决：空白页、静态资源文件404错误、refrenceError:promise未定义（部分浏览器不支持ES6语法）

小咪咪 2021-08-20 01:02 362阅读 0赞

（前言：文章记录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获取到依赖文件，修改后如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70][]

**注意事项：**router/index.js路由配置里边默认模式是hash，如果改成了**history模式的话，打开也会是一片空白**。如果使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是你app依赖页面。

### 2、错误：静态资源文件404 NOT Founed ###

![20190822160246657.png][]

**分析原因：**项目中出现png、woff、tiff等文件404 NOT Founed，这里以找不到homr\_bg.png文件为例分析，可以在项目cmd命令窗口看到打包记录，也可以在dist/static/img 下看到打包文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 2][]

检查css文件中对该图片的引用路径出现错误如下图，在服务器根目录获取不到static文件夹，所有文件夹下png 404错误

![20190822160631424.png][]

**解决方式：在build/utils文件中的下图所示位置修改 publicPath:属性值为 '../../'**，如下图，这样打包的样子就变成../../static的样子了，就可以解决我们的问题。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 3][]

### 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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70]: /images/20210726/1ea88c9f0f0745a2b2d8f9b3cf3e6661.png
[20190822160246657.png]: /images/20210726/dbcd2d263c9f4164ace6e4582f671823.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 1]: /images/20210726/f83d5299f7fd4229a0df223e29311f92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 2]: /images/20210726/937d9d36744c4276a522c7e8c0e82ff9.png
[20190822160631424.png]: /images/20210726/595086faf3f849928bc3a951970cce8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 3]: /images/20210726/39be2eef83fc4fe9a3a4c24c78e39bc7.png