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打包到部署的流程了，希望对大家有些许的帮助吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
easycom模式开发UNI-APP组件调用必须掌握的实用技巧
uni-app基于VUE开发，通常组件的使用都是先安装，然后全局或者局部引入，注册，今天通过本文给大家分享easycom模式开发UNI-APP组件调用必须掌握的实用技巧，需要的朋友一起看看吧2021-08-08
Vue router的addRoute方法实现控制权限方法详解
这篇文章主要介绍了vue动态路由添加，vue-router的addRoute方法实现权限控制流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-09-09
本篇文章主要介绍了vue-resouce设置请求头的三种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本文给大家分享使用vue-cli创建项目基于webpack模板打包的配置方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-07-07
这篇文章主要介绍了前端Vue.js实现json数据导出到doc，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
在不久之前,看到一个比较有意思的小程序,就是静神木鱼,可以实现在线敲木鱼,自动敲木鱼,手盘佛珠,静心颂钵的，下面就来揭秘如何实现这个小程序中敲木鱼的累加向上漂浮动画，需要的可以参考一下2022-11-11
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。这篇文章主要介绍了一文快速详解前端框架 Vue 最强大的功能,需要的朋友可以参考下2019-05-05
vant(ZanUi)结合async-validator实现表单验证的方法
这篇文章主要介绍了vant(ZanUi)结合async-validator实现表单验证的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
本篇文章主要介绍了VueJs监听window.resize方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
vue 使用mescroll.js框架实现下拉加载和上拉刷新功能
这篇文章主要介绍了vue 使用mescroll.js框架 实现下拉加载和上拉刷新功能,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
最新评论