vue项目打包后常见问题总结与解决办法

问题一：使用的element或iview框架图表不显示

这种问题往往是开发的时候显示正常，但是一打包就发现图表不显示了，此时我们应该找到我们vue工程目录里的build文件下的untils.js ，添加：publicPath: '../../' , 如下图所示：

 

问题二：打包后的工程的图片文件不能正常显示，提示图片文件找不到

图片不能显示，那就说明项目打包后，图片文件相对路径不对，此时找到config里面的index.js，在build模块下加入assetsPublicPath: './', 如下图所示：

 

问题三：vue-cli项目打包后router-view中的内容不显示问题

vue项目打包后得到dist文件，我们直接打开dist文件下的index.html文件后发现页面是空白的，此时问题往往都是因为我们在router中设置了mode:'histroy', 如下图：

原因说明：不是说不能打开这个模式，而是开启这个模式需要后端设置的配合，在没有后端配合的情况下就打开路由history模式的时候(vue-router默认hash模式)

 

问题四：vue打包后的dist文件在IE浏览器中打不开（空白页面）

1.下载安装 babel-polyfill，执行命令语句：

npm install babel-polyfill --save-dev

看到版本号之类的信息后表示安装成功：

安装成功之后在我们的vue工程的最外层的 package.json中有了这个依赖包，如下图：

2.前面我们安装好了babel-polyfill，现在我们需要将其引入到我们的vue工程中应用，在我们的vue工程下的src文件中找到main.js并引入babel-polyfill，如下图所示：

3.打开我们的build 文件下的webpack.base.config.js，将entry中的app: './src/main.js’配置改为：app: [‘babel-polyfill’, ‘./src/main.js’]；如下图所示：

如此一来就解决了在ie浏览器中打开页面是空白的问题了。

---