Vue3打包后页面空白解决办法

ঞ᭄阿້໌ᮩ莲໌້ᮨꦿ

已于 2022-08-17 13:52:53 修改

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue web js 文章标签： vue.js javascript 前端

于 2022-08-17 11:38:22 首次发布

本文链接：https://blog.csdn.net/qq_41241504/article/details/126382759

js 同时被 3 个专栏收录

36 篇文章

订阅专栏

web

35 篇文章

订阅专栏

vue

17 篇文章

订阅专栏

本文指导您如何修复Vite打包后的空白页面问题，通过在vite.config.js中添加base:'./'配置。了解如何调整以确保本地和服务器环境正常显示内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vite打包后页面空白
Vite打包后在本地打开空白是正常的，如果在服务器中还是空白，在vite.config.js文件添加base:'./'，如下，再重新npm run build

import {
	defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
	plugins: [vue()],
    base:'./' 
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ঞ᭄阿້໌ᮩ莲໌້ᮨꦿ

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

08-28

以下是一些解决 Vue 打包后显示空白页的常见方法： 1. **检查配置文件**： - 在 Vue 项目中，配置文件通常为 `vue.config.js`。我们需要确保这个文件存在，并且配置正确。如果你的项目没有这个文件，可以创建一个...

Vue3打包发布后，页面运行起来空白

cwhzm的博客

07-10

2277

1、npm run build 后把dist 文件夹中的文件传到云服务，跑起来是空白的。

参与评论您还未登录，请先登录后发表或查看评论

Webpack打包vue项目后发现index.html为空白

最新发布

EdgeWorld的博客

05-11

354

之后我发现其中也有history出现，但不能像上面那样直接修改history为hash，而是需要注意到'vue-router'中还有一个函数是‘createWebHashHistory’，将原来代码的‘createWebHistory’函数替换掉，得到。此时再重新运行npm run build，得到的index.html不再是空白。今天在用Webpack打包vue3项目后，发现index.html一直是空白，于是我在网上找到该方法：修改相对路径 “/” -> “./”，

vue3打包后页面空白解决方法

01-12

2272

vue3项目打包后页面空白解决方法

解决vue3打包过后空白页面

小菜鸟的博客

04-08

4187

解决vue3打包过后空白页面在项目根目录下，新建一个vue.config.js文件 module.exports = { // 基本路径 publicPath: './', // 输出文件目录 outputDir: 'dist', configureWebpack: { externals: { } } } 如果还是不可以，那么需要找到如下页面： ...

vue3打包后打开页面部分空白如何解决？

qq_20604185的博客

05-17

6292

我个人的原因是router的history模式引起的。做以下几点，问题解决。 1.修改vue.config.js const { defineConfig } = require('@vue/cli-service') //const path = require("path"); //const resolve = function(dir) { // return path.join(__dirname, dir); //}; module.exports = defineConfig({

vue项目打包后打开页面空白解决办法

08-27

面对Vue项目打包后页面空白的问题，开发者应采取以下步骤进行解决： 1. 首先，检查项目config文件夹中的index.js文件，确保其中的assetsPublicPath属性正确配置了静态资源的路径。 2. 其次，检查src文件夹中router/...

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

12-09

Vue.js 是一款流行的前端框架，它的路由管理器 ...总之，Vue Router 的 History 模式提供了更佳的 URL 体验，但部署时需要对服务器进行适当的配置，以避免页面空白的问题。理解这一点对于开发和维护 Vue 应用至关重要。

vue3项目，本地页面正常显示，打包后页面空白

lth002的博客

09-11

1241

通过浏览器的页面元素选择定位到问题是因为路由没有正确加载，但是排查了路由文件，入口文件，vite.config.js文件，都没有发现任何问题，直到将路由文件里面的按需加载页面文件改成直接加载，才正确渲染出了页面，才发现按需加载写错了。

vue3打包后部分页面空白

Shawn的个人博客

08-03

773

一、问题描述在开发模式下，使用命令npm run serve运行可以正常显示，但使用npm run bulid打包后打开index.html文件发现显示白屏，但是资源都能正常获取，其他页面也显示正常。二、问题解决查找了很长时间。发现问题是透明度的问题，原来我在一个页面设置的透明度为75%，但是打包后显示则为1%，原因好像是预处理器无视了百分号，把75这个值clip到1%，因此无法显示出来。这里把opacity设置为小数，把75%设置为0.75重新打包即可正常显示。 ...

vue3.x打包之后空白页解决办法(一)

掘墓者的博客

03-29

7223

vue3.x打包之后空白页报错解决首先说如果用vue3.x打包之后打开index.html时报错如下出现这样的报错，请在你的VUE项目的根目录创建一个vue.config.js 将下面这句话打入这句话的大概意思就是把打包之后的路径从子目录变成同级目录查找打包之后空白页不报错然而打包之后再访问index.html 发现还是一样空白页但是不报错了。此时需要打开你的dist打包文件去下...

Vue3打包发布,刷新出现的空白页面和错误

weixin_44600235的博客

07-11

1500

Vue3打包发布出现的错误：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of text/html. Strict MIME type checking is enforced for module scripts per HTML spec.

Vue3+vite打包后页面空白问题

05-16

3189

二、vue3 vite打包后页面白屏控制台报错Access to script at 'file:///E:/vueProject/vue3-project/Vue3-big-event-admin/dist。1 安装兼容插件 @vitejs/plugin-legacy。原因：资源路劲问题修改：vite.config.ts。在vite.config.ts 中进行配置。然后到 dist目录下在cmd 中运行。想要查看，可以安装一个本地服务器插件。四、nginx.conf。

Vue3 +ts 打包后访问是空白页面

qq_43672627的博客

04-26

4137

问题一: 编译后的index.html引用的路径不正确查看编译后的index.html文件发现引用的js、css文件都是错误的路径解决方法：在项目根目录下创建vue.config.js文件，并在文件中写入如下内容 module.exports = { // 很多博文说把路径配置为'./'就行。但是我配置为'./'路径依然不对 publicPath: "././", productionSourceMap: false, }; 问题二：路由要配置成hash模式这个问题网上的回答比较多

解决vue3项目打包发布到服务器后访问页面显示空白问题

m0_59006402的博客

12-01

3545

2.router里面的路由模式改为 createWebHashHistory。env.VITE_PUBLIC_PATH 的值如下。1.在 vite.config.ts 文件中加入。

vue打包后打开页面是空白的问题

Z15837104340的博客

07-13

3363

1、npm run build打包项目之后，我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器，但最近发现直接打开index.html页面是空白的，还会报几个错，找不到页面路径。原因：找到config文件下index.js，全局搜索assetsPublicPath，结果是assetsPublicPath：' / ' 默认为根目录，而index.html和static是在同一级目录下，因此，解决方法就是assetsPublicPath：' ./ ' 斜杠前加一个点..

vue3实战-如何解决vue3项目打包发布到服务器后访问页面显示空白问题

0月影星云0的博客

03-21

5098

1、处理vue.config.js文件中的publicPath，处理如下： const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ publicPath: process.env.NODE_ENV === 'production' ? './' : '/', outputDir: 'dist', indexPath: 'index.html', lintOnSave: false,

vue-cli3项目，浏览器运行正常，打包后页面空白报错，解决方案

面对疾风吧

08-16

9876

vue-cli3创建的项目，打包后页面空白报错解决萌新专用，直接复制过去就ok，直接上代码在你的项目里新建一个文件：vue.congif.js ，是src的同级目录下创建，不是src里面创建文件哦！然后复制这段代码过去就OK了，直接打包运行就行了。我都帮你配置好了。如果要上线的话，你记得改改路径，路径名称要加上你的服务器的，当然如果只是打包后不放在服务器上，直接打包运行就ok。就像下......

vue项目打包后打开空白解决办法

05-10

vue项目打包后打开空白的情况可能有很多原因，解决办法也有多种，下面是几种常见的解决办法： 1. 检查文件路径：在打包后文件的引用路径可能出现错误，导致页面打开空白，因此需要检查文件路径是否正确，确保可以正确引用文件。 2. 检查打包工具的配置：有时候打包工具的配置可能存在问题，比如缺少一些必要的插件或者配置不正确，需要仔细检查配置文件，确保配置正确。 3. 检查代码错误：有时候打包后页面打开空白可能是因为代码错误，比如语法错误或者逻辑错误，需要仔细排查代码，找到并修复错误。 4. 检查依赖版本：项目中使用的依赖版本可能存在不兼容的问题，需要更新或者降级依赖版本，确保依赖版本能够兼容。 5. 检查浏览器缓存：有时候打包后页面打开空白可能是因为浏览器缓存问题，可以尝试清除浏览器缓存，再重新打开页面看看是否能够解决问题。 6. 检查打包后的文件是否正确：可能是打包后文件出现错误或者缺失导致的，需要重新打包或者检查是否有文件缺失。综上所述，解决vue项目打包后打开空白的问题需要仔细排查和调试，找到并修复问题的根本原因，才能够解决该问题。