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

目录
  • vue3无config文件夹打包后页面空白
    • 项目场景
    • 场景1：vue2有config文件夹
    • 场景2：vue3无config文件夹
  • 目录结构没有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:"./"
}

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

赞 (0)

相关推荐

  • Vue打包后页面出现空白解决办法

    一. vue-cli创建项打包后打开页面为空白的问题解决 命令行输入:npm run build 打包出来后项目中就会多了一个文件夹dist,这就是我们打包过后的项目. 二.打包完成后配置会自动生成vue.config.js文件,这个文件非常重要值得你收藏 配置如下: const path = require("path"); const resolve = function(dir) { return path.join(__dirname, dir); }; module.expo

  • 浅谈vue项目如何打包扔向服务器

    浅谈vue项目如何打包扔向服务器

    当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中.我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上. 如果是 vue-cli (非 simple 脚手架),这篇文章可能有点帮助.地址链接:vue-cli 如何打包上线 先来描述一下期间遇到的问题有哪些: 1.打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提示 404. 2.打包好的静态资源均是绝对

  • vue+webpack 打包文件 404 页面空白的解决方法

    最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在http服务器上才可以运行, 例如 :nginx vue单页面的启动页面是index.html,路由的路径实际是不存在的,所以会出现刷新页面404的问题,需要设置所有找不到的路径直接映射到index.html 1 刷新页面404 配置启动文件的index页面的路径root: D:/workPlace

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

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

    目录 vue3无config文件夹打包后页面空白 项目场景 场景1:vue2有config文件夹 场景2:vue3无config文件夹 目录结构没有config文件夹 解决方案 vue3无config文件夹打包后页面空白 项目场景 项目场景:vue文件打包之后页面空白(全) 场景1:vue2有config文件夹 找到config文件夹下的index.js文件,将 assetsPublicPath: "/"改为assetsPublicPath: "./" 原理: 打包

  • vue3.0 vue-router4.0打包后页面空白的解决方法

    开发环境可以正常渲染页面,路由跳转都没有问题,但是打包之后本地打开index.html出现报错或者页面空白的情况: 脚手架版本: vue-router版本: 第一种报错-资源加载失败 这种错误是因为vue.config.js的配置里面 publicPath写了绝对路径,生产环境改为./相对路径即可,vue.config.js详细配置参考官方文档 第二种错误:无报错,js加载了,但是页面空白(router-view没有渲染任何内容) 这种情况是因为vue-router的history模式,hist

  • Vue下路由History模式打包后页面空白的解决方法

    vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: '/history', // mode: 'his

  • php将文件夹打包成zip文件的简单实现方法

    示例如下: function addFileToZip($path,$zip){ $handler=opendir($path); //打开当前文件夹由$path指定. while(($filename=readdir($handler))!==false){ if($filename != "." && $filename != ".."){//文件夹文件名字为'.'和'..',不要对他们进行操作 if(is_dir($path."/&q

  • vue打包后出现空白页的原因及解决方式详解

    vue打包后出现空白页的原因及解决方式详解

    目录 路由模式 history 路由模式 hash 总结 1. 修改路径 2. 更改路由模式 路由模式拓展 路由的hash和history模式的区别 打包路由选择 路由模式 history 新建项目什么都不动,路由模式:history, 直接npm run build打包 打包之后,直接打开dist文件里面的ndex.html可以看到页面是空白的,控制台是这样的. 再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入是错误的,应该用'./'而不是'/' 那怎么修改打包之后的路径呢?查看

  • vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决

    vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决

    目录 vue-cli3.0修改打包后的文件地址和文件名 问题描述 修改文件名 报错解决 vue文件夹名称修改导致错误 vue-cli3.0修改打包后的文件地址和文件名 问题描述 最近开发一个web端vue项目时使用了vue-cli3.0搭建项目目录,开发过程中一切顺利,没有遇到什么问题,开发完毕打包上线时出现了问题,打包后的文件默认在dist目录下,打开index.html时发现不能运行,报错如下: 现在有两个问题 我想修改打包后的文件夹名称: 上述报错问题的解决: 网上查询一番,发现大家都说修

  • vue打包后显示空白正确处理方法

    vue打包后显示空白正确处理方法

    在项目中很多时候需要用到vue打包成html不需要放在服务器上就能浏览.根据官网打包出来的html直接打开是显示空白. vue打包后显示空白正确处理方法是 1.找到配置文件 修改 这样打包处理可以打开但是页面样式会找不到 2.修改 找到对应的位置加上publicPath: '../../' 然后就成功了! 很多朋友还遇到这样的问题 vue打包后index文件一片空白,怎么回事呢? vue项目你npm run build打包后,点开index文件打开一片空白, 并报错解决方法:路径问题, 总结 以

  • webpack配置打包后图片路径出错的解决

    webpack配置打包后图片路径出错的解决

    问题 项目在开发环境下工作正常,当打包后图片不见了,检查元素后发现路径出错了. 图片路径是这样:background: url(/static/img/bg_camera_tip.bd37151.png),但该路径下文件并不存在. 打包后文件目录如下: 可以看到背景图片的路径应该是../../static而实际却是/static,找到原因后就好解决了 方法一 查看build目录下webpack.base.conf.js的配置,图片文件会经过url-loader处理. module: { rule

  • Vue刷新后页面数据丢失问题的解决过程

    目录 一.为什么刷新后数据会丢失 二.解决思路 三.解决方法 四.总结 总结 一.为什么刷新后数据会丢失 vuex存储的数据只是在页面中,相当于全局变量,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失.因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋值. 二.解决思路 办法一:将vuex中的数据直接保存到浏览器缓存中(sessionStorage.localStorage.cookie) 办法二:在页面刷新的时候再次请求远

随机推荐