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

前端部署到子路径下的一些踩坑记录

打包后发布服务能正常运行，但是刷新之后项目404 在网上找到相关配置仍然未解决为题 server { listen 80; index index.html; root /xxxx/dist; #vue-router配置 location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^

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

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.

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

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

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

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

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

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

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

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

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

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