vue3无config文件夹打包后页面空白问题及解决

更新时间：2022年05月24日 14:28:43 作者：周小盗

这篇文章主要介绍了vue3无config文件夹打包后页面空白问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue3无config文件夹打包后页面空白

项目场景

项目场景：vue文件打包之后页面空白（全）

场景1：vue2有config文件夹

找到config文件夹下的index.js文件，将 assetsPublicPath: "/"改为assetsPublicPath: "./"

原理：打包之后的index.html找不到相关的资源，默认/在同级查找，没有找到，如果上面改完之后还是不行，请仔细检查打包后的项目结构，修改这个assetsPublicPath

在这里插入图片描述

场景2：vue3无config文件夹

找到项目中的vue.config.js文件（如果没有可以照着图中的项目结构建一个），然后在里面添加

module.exports = {
    publicPath: './', // 根域上下文目录
    outputDir: 'dist', // 构建输出目录，可不写
    assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)，可不写
};

就可以了，里面的路径原理和场景1一样，可自行按照实际项目需求修改

在这里插入图片描述

目录结构没有config文件夹

问题：

在页面完成后，打包上线页面出现白屏问题。百度到的，解决办法是，改变config文件夹下，index.js中，build下的 assetsPublicPath："/" => assetsPublicPath："./"。随后发现创建的是vue3的项目没有config文件夹。

解决方案

在项目根目录，创建 vue.config.js 文件，文件内容如下：

module.exports={
    publicPath:"./"
}

在这里插入图片描述

解决！以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue中babel.config.js配置示例详解
Babel是一个JS编译器,主要作用是将ECMAScript2015+ 版本的代码,转换为向后兼容的JS语法,以便能够运行在当前和旧版本的浏览器或其它环境中,下面这篇文章主要给大家介绍了关于Vue中babel.config.js配置详解的相关资料,需要的朋友可以参考下
2023-02-02
使用vue init webpack项目名创建项目方式
这篇文章主要介绍了使用vue init webpack项目名创建项目方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
vue中下载文件后无法打开的坑及解决
这篇文章主要介绍了vue中下载文件后无法打开的坑及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
Vue中v-if、v-if-else、v-else-if与v-show的基本使用
v-if,v-else,v-else-if,v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回truth值的时候被渲染,这篇文章主要给大家介绍了关于Vue中v-if、v-if-else、v-else-if与v-show的基本使用,需要的朋友可以参考下
2022-10-10
vue-cli3项目生产和测试环境分包后文件名和数量不一致解决
这篇文章主要为大家介绍了vue-cli3项目生产和测试环境分包后文件名和数量不一致解决方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
Vue3中如何使用v-model高级用法参数绑定传值
本文给大家介绍Vue3中使用v-model高级用法参数绑定传值的相关知识,包括单个输入框传值和多个输入框传值,一个组件接受多个v-model值,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
2023-10-10
Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示
这篇文章主要介绍了Vue+ECharts实现中国地图的绘制以及拖动、缩放和各省份自动轮播高亮显示,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-12-12
Vue新手指南之创建第一个vue-cli脚手架程序
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章主要给大家介绍了关于Vue新手指南之创建第一个vue-cli程序的相关资料,需要的朋友可以参考下
2021-05-05
vue3.0-props、computed、自定义事件方式
这篇文章主要介绍了vue3.0-props、computed、自定义事件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
Vue组件的计算属性和普通属性的区别说明
这篇文章主要介绍了Vue组件的计算属性和普通属性的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01