vue.js打包项目后页面出现空白的解决办法
相信很多刚刚接触vue的伙伴会遇到这样的问题，就是说vue项目在开发环境下一切正常，但是打包之后，打开index.html页面却是一片空白，打开控制台发现这样的错误
出现这种情况要分两个处理方式（vue-cli2和vue-cli3），先说vue-cli2； 首先找到config/index.js文件，将assetPublicPath的路径改为“./”即可，
vue-cli3的话要稍微麻烦些，因为vue-cli3简洁了许多，没有了配置文件，所以需要自己创建，只能在项目的根目录下创建，并且文件的名字只能是vue.config.js，然后在这个文件里面加上下面的代码即可
module.exports = {
assetsDir: 'static',
parallel: false,
publicPath: './',
}
到了这步本来就可以了，但是有的小伙伴还是没有显示出来，那是因为你的路由模式的关系，你把你的路由模式改成“hash”就行了，虽然有点丑陋，但是至少功能出来了，如果你不想使用“hash”模式，非要用历史模式的话，本地是不行的，必须要服务器配合，这里就说下怎么使用nginx配合vue使用历史模式
安装nginx就不说了 ，假设你已经安装好了nginx，在server里面加上
location /aaa {undefined
alias D:/bbb/ccc;
index index.html index.htm;
try_files $uri $uri/ /aaa/index.html;
}
其中/aaa是需要访问的地址， D:/bbb/ccc是你文件真实存放的路径，index指的就是你的入口文件，你的文件名如果不是index.html的话就替换成你的入口文件的名字，这里面最重要的是 try_files $uri $uri/ /aaa/index.html 这句话，这句话主要就是用来处理vue的历史模式的，在配置完nginx后, 还要在项目里面加点东西, 其实也很简单, 就在项目的src目录里面加上
在config/index.js里面加上
就可以了, 不然的话刷新页面就会报错404, 当然这是把项目放在二级路由的情况下, 如果是一级路由的话就可以不用加base这个属性,
最终效果如下。
这里就完成了vue打包到部署的流程了，希望对大家有些许的帮助吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vuex 注入 Vue 生命周期的过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
本篇文章记录仿写一个el-tooltip组件细节，从而有助于大家更好理解饿了么ui对应组件具体工作细节，本文是elementui源码学习仿写系列的又一篇文章，后续空闲了会不断更新并仿写其他组件2023-07-07
这篇文章主要为大家详细介绍了vue+echarts实带渐变效果的折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue.js el-table动态单元格列合并方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
本篇文章主要介绍了详解VueJs前后端分离跨域问题，详细介绍了在项目内设置代理（proxyTable）的方式来解决跨域问题，有兴趣的可以了解一下2017-05-05
在前端开发中,我们时常需要处理文件上传和下载的功能,本文主要和大家分享一下如何使用Vue3和JSZip库在浏览器端实现zip文件压缩,需要的可以参考下2024-05-05
这篇文章主要介绍了Vue 递归多级菜单的实例代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
本文主要介绍了vue.js实现绑定class和style样式的方法。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
这篇文章主要给大家介绍了关于vue项目中使用scss的详细方法步骤,scss是一种css预处理语言,定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性,让css更加简洁、适应性更强,可读性更佳,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Vue请求JSON Server服务器数据的实现方法,需要的朋友可以参考下2018-11-11
最新评论