vue项目打包后常见问题总结与解决办法
问题一:使用的element或iview框架图表不显示目录问题一:使用的element或iview框架图表不显示
问题一:使用的element或iview框架图表不显示
这种问题往往是开发的时候显示正常,但是一打包就发现图表不显示了,此时我们应该找到我们vue工程目录里的build文件下的untils.js ,添加:publicPath: '../../' , 如下图所示:
问题二:打包后的工程的图片文件不能正常显示,提示图片文件找不到
图片不能显示,那就说明项目打包后,图片文件相对路径不对,此时找到config里面的index.js,在build模块下加入assetsPublicPath: './', 如下图所示:
问题三:vue-cli项目打包后router-view中的内容不显示问题
vue项目打包后得到dist文件,我们直接打开dist文件下的index.html文件后发现页面是空白的,此时问题往往都是因为我们在router中设置了mode:'histroy', 如下图:
原因说明:不是说不能打开这个模式,而是开启这个模式需要后端设置的配合,在没有后端配合的情况下可以设置mode:hash (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浏览器中打开页面是空白的问题了。
更多推荐
所有评论(0)