vue打包后dist目录下的index.html网页显示空白的问题(两种方案)
作者: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网页显示空白内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!