vue打包后dist目录下的index.html网页显示空白的问题(两种方案)
更新时间：2023年11月10日 09:19:06 作者：HarmonyOS体验官-春波
本文主要介绍了vue打包后dist目录下的index.html网页显示空白的问题,主要介绍了两种方式,具有一定的参考价值,感兴趣的可以了解一下
今天带来的攻略是:vue项目 打包后dist 目录下index.html 打开后显示空白的问题。
解决方式很简单：一🚀
方案1、关掉router.js中的哈希模式
注释掉 mode：'history' 重新npm run build打包即可
//mode: 'history' 注释即可
方案2、修改config配置文件
如果没有vue.config.js 文件 可主动进行配置 一🎈 常用的简单配置 在文末 👇👇👇
打开vue.config.js 文件
在vue.config.js文件中 找到publicPath：'/' 将其 '/' 【根目录】修改为'./'【当前目录】，重新npm run build 打包即可
vue.config.js 基本配置源码：
//vue.config.js
const port = 3000; // 端口配置
module.exports = {
devServer: {
port, //设置端口
},
publicPath: './',//修改目录
outputDir: 'dist', // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
assetsDir: 'assets', // build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
filenameHashing: true, // 默认在生成的静态资源文件名中包含hash以控制缓存
runtimeCompiler: false, // 是否使用包含运行时编译器的 Vue 构建版本
productionSourceMap: true, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
};
效果演示：
到此这篇关于vue打包后dist目录下的index.html网页显示空白的问题(两种方案)的文章就介绍到这了,更多相关vue index.html网页显示空白内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
解决VUEX的mapState/...mapState等取值问题
这篇文章主要介绍了解决VUEX的mapState/...mapState等取值问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
emits是Vue3新增的选项,emits主要作用在子组件中,用于接收在父组件中绑定的方法,这篇文章主要给大家介绍了关于vue3.x中emits的基本用法,需要的朋友可以参考下2022-07-07
浅谈vue项目4rs vue-router上线后history模式遇到的坑
今天小编就为大家分享一篇浅谈vue项目4rs vue-router上线后history模式遇到的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue使用Vuex一步步封装并使用store全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家介绍了vue封装组件js版基本步骤，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
这篇文章主要介绍了Vue3网站首页布局开发，上篇文章已经提到集成Ant Design Vue后，和Element Ui一样，还是组件的使用，接下俩我们就来看看Vue3网站首页布局开发的相关资料,需要的朋友可以参考下面文章的具体内容2021-10-10
Vue3使用Suspense优雅地处理异步组件加载的示例代码
Vue3是Vue.js的最新版本,它带来了许多令人兴奋的新特性和改进,其中一个重要的特性是Suspense,它为我们提供了一种优雅地处理异步组件加载和错误处理的方式,本文给大家介绍了Vue3使用Suspense优雅地处理异步组件加载的示例,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue如何关闭prettier警告warn问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
今天小编就为大家分享一篇axios 封装上传文件的请求方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
相信tab切换对于大家来说都不算陌生，后台管理系统中多会用到。如果不知道的话，可以看一下浏览器上方的标签页切换，大概效果就是这样。2021-05-05
最新评论