笔记-vite2项目打包后nginx中显示空白

原创已于 2023-05-23 17:21:01 修改 · 670 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-05-23 17:19:38 首次发布

文章讲述了作者在使用Vite2时遇到的问题，项目依赖的@vitejs/plugin-vue插件在最新版下导致本地运行和打包正常，但部署到nginx后页面显示空白。尝试升级Vite未解决问题，最终通过降级@vitejs/plugin-vue到2.3.3版本解决了问题。

vite2的一个项目，

"@vitejs/plugin-vue": "latest",
"vite": "^2.0.0",

开始报错是参考了网上的方法，升级vite或降级插件，

升级了vite，结果本地运行和打包都没毛病。只是打包文件放到nginx下看时页面空白，无报错。

倒腾了好久，后来经帮助发现竟然是@vitejs/plugin-vue的原因，降级后就ok了

"@vitejs/plugin-vue": "^2.3.3",

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

aliceyang2012

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue3 - vite项目打包后访问白屏报错Expected a JavaScript module script but the server responded with a MIME type

高级前端工程师

12-18

9030

vue3，vite，打包build部署报错，页面白屏，vue报错，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，关于vite build后访问报错：Expected，vite打包 nginx部署报错，服务器base配置，资源路径

vue3 - vite项目打包部署服务器上线后图片不显示并且路径中存在undefined字眼，本地开发环境下正常显示图像没任何问题，但build编译打包后上传到线上服务器后再打开就不显示了，路径有问题

高级前端工程师

08-18

4655

vue3，vite，图片不显示，图像加载失败，打包后图片路径不对，前面多了一个undefined，本地没问题只要打包上线就报错，vue3 vite项目解决部署线上图片URL失效问题，使用本地图片打包后不显示，本地资源路径，本地图片图标，图标不显示，打包后图片失效的问题，访问图片/图标不显示的问题，vue3+vite打包后图片路径错误不显示，背景图打包之后访问路径错误问题的解决，打包部署到服务器上却显示路径undefined问题，图片url域名错误，导致无法显示，还是报错显示不了，如何解决，无效，还是不行，r

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

vite+vue3打包后部署nginx Failed to load module script，空白页，404，反向代理等问题。

m0_50360903的博客

03-23

4150

vite打包部署项目到nginx可能会遇到的全部问题。

解决Vue3+Vite3 打包部署到nginx后配置非根目录刷新页面报错空白

热门推荐

我不是程序员的博客

12-19

1万+

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.

记录坑：vue element界面不显示---可以考虑nginx的影响

Gabriel_gu的博客

08-28

670

vue element界面不显示---可以考虑nginx的影响现象解决现象 vue和element的页面不出图像，界面为空白。解决环境里面设定了nginx ，设置了两台服务器的 1次/5次的跳转设定，只更新了一台电脑上的内容，或者删除其中某一台电脑上的网页，会导致界面刷新不出来。如果页面访问的次数不多的话，可以换一种方法，设定为backup属性，进行主备切换。 ...

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

IT菜鸟

03-01

7966

项目是放在根目录运行，使用默认配置 import.meta.env.BASE_URL 默认输出 '/'；vite.config.js 增加 base: './'如果项目打包后放在二级目录运行，例如：test/dist。nginx配置（项目放在二级目录时配置nginx）里面的【路由History模式打包页面空白】打包后 index.html。

vite打包静态文件打开显示空白

weixin_37795155的博客

03-31

1097

vite打包静态文件打开显示空白

electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合

05-02

项目打包后仍有问题待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了，想试试新功能工作中用的 umi+electron 项目大了，启动速度并不理想；用 vite 试试...

手写vite插件 - 打包后资源自动上传oss

10-08

而"手写vite插件 - 打包后资源自动上传oss"这个项目则进一步扩展了Vite的功能，使得构建完成后，资源能够自动上传到阿里云OSS（Object Storage Service），这对于部署静态站点或Web应用提供了极大的便利。...

使用vite打包并部署vue项目到nginx

m0_74824687的博客

01-17

1141

在。

vite2.0+vue3.2部署Nginx 刷新404

默存

07-01

1906

在本地运行没问题，部署到服务器上，能正常访问，但是刷新之后页面404

RuoYi-Vue3项目Vite打包后页面空白问题解析与解决方案

最新发布

gitblog_01412的博客

08-10

506

在使用RuoYi-Vue3进行项目开发时，很多开发者会遇到一个棘手的问题：开发环境下一切正常，但执行`npm run build:prod`打包后，部署到生产环境却出现页面完全空白的情况。这种问题往往让人措手不及，特别是在项目上线前夜。 **典型症状：** - 控制台无任何错误信息 - 网络请求正常，资源加载成功 - 页面DOM结构存在但内容为空 - 开发环境与生产环境表现不一致 ## 根本原...

Vue2项目, 打包后, 页面显示空白

weixin_40944062的博客

02-18

1362

在Vue2项目打包后, 发现生成的index页面为空白这里的解决办法修改router文件中的mode, history模式, 会让访问路径变得简洁, 没有#, 不过, 需要后端的处理, 也可能导致访问有问题, 所以, 还是使用了h5的hash. const router = new Router({ routes, // mode: 'history', // 将mode模式改为hash. mode: 'hash' }) 这里只是这一次遇见的问题, 具体问题还是需要具体对待, 其他

vue-cli打包到部署到nginx服务器

weixin_34192816的博客

07-06

2146

最近公司把云平台产品用vue 前后端分离的框架来写，前面大部分开发都比较顺利，后面打包部署出了bug 现在记录下自己遇到的哪些坑 1，我直接npm run build 打包出来，打开dist目录下面的index.html 空白页，页面上出现 no "NODE ENV"是我打包时没有指定打包到哪个环境正确打包是 npm run build:prod 2.关于vue-router 中...

vite打包使用nginx代理本地localhost显示白页

weixin_46448762的博客

02-21

425

错误写法这么写本地测试没问题但是打包加载不出来路由。本地路由组件导入写法错误。

vue2打包部署到nginx，解决路由history模式下页面空白问题

Life And Code

09-04

1233

之前项目路由使用的是hash，现在要求调整为history模式，但是整个过程非常坎坷，遇到了页面空白问题。

vue项目打包到后部署服务器，某些页面出现空白页

weixin_54000091的博客

03-27

2054

今天将vue项目打包后的文件放到服务器上，首页和有些其他模块页面可以访问。但是出现了一些二级页面空白，nginx报404的问题。解决办法 1.首先找到 vue.config.js 的配置文件，如果没有可以手动创建。然后更改其公共资源目录, 如果是vue-cli3的项目，则更改publicPath:’./’ ,其他版本的另行查阅资料效果如下 2.找到router配置文件，更改其路由模式为hash，并且base属性为随着项目环境变化而变化。效果如下 ...

vite+vue3.0打包后部署到nginx服务器上一部分路由跳转返回404

Raoxiaohei的博客

07-30

613

问题就是跟描述一样，前期怀疑是自己命名问题或者vite中配置没对，看了很多文章也尝试了很多次发现都不行，最后才怀疑是nginx的问题，然后在配置中添加这一句就行了，真是当了一回冤大头。

Vite2+Vue3学习笔记（六）：在Nginx非根目录下配置Vite2+Vue3项目

YGいくこさん的博客

08-30

2645

新手小白Vue3学习笔记第六篇，Nginx配置Vite2+Vue3项目。

修改electron-vite-vue项目打包后时的软件图标以及名字

07-08

### 修改 `electron-vite-vue` 项目打包后的应用程序图标和名称要修改使用 `electron-vite-vue` 构建的应用程序的名称和图标，主要需要调整构建配置文件中的相关参数。以下是具体的配置方式： #### 修改应用名称在基于 Vite 的 Electron 项目中，若使用了 `vite-plugin-electron` 插件进行构建，则可以通过设置 `productName` 字段来更改应用的显示名称。该字段通常位于 `vite.config.js` 文件中的 `electron` 插件配置项内： ```js import vue from '@vitejs/plugin-vue' import electron from 'vite-plugin-electron' export default defineConfig({ plugins: [ vue(), electron({ entry: 'electron/main.js', vite: { build: { outDir: 'dist-electron' } }, builderOptions: { productName: '你的应用名称' // 设置应用名称 } }) ] }) ``` 此配置会影响最终打包的应用程序文件名、安装界面标题等地方所使用的名称[^1]。 #### 修改应用程序图标为了更改打包后应用程序的图标，需指定 `.ico` 格式的图标文件路径。Electron 应用通常使用 `electron-builder` 进行打包，因此可以在其配置中定义 `win.icon` 字段来设置 Windows 平台下的主窗口图标： ```js builderOptions: { win: { icon: './build/logo.ico' // Windows 平台下的应用图标 } } ``` 此外，若希望在安装过程中也显示自定义图标，可进一步配置 NSIS 安装程序选项： ```js builderOptions: { nsis: { installerIcon: './build/logo.ico', // 安装程序图标 installerHeaderIcon: './build/logo.ico' // 安装向导头部图标 } } ``` 请确保 `logo.ico` 文件尺寸为 256x256 像素，以兼容不同分辨率下的显示需求[^2]。 ---