vue打包上线流程，nginx服务器配置（路由history模式白屏如何处理）

最新推荐文章于 2024-08-16 12:09:19 发布

原创最新推荐文章于 2024-08-16 12:09:19 发布 · 383 阅读

CC 4.0 BY-SA版权

本文介绍了如何使用webpack进行项目打包，并通过Nginx进行部署。重点讲解了Nginx的下载、配置以及相关命令，包括startnginx用于启动服务，-sstop和-squit分别用于快速和有序关闭服务，-sreload用于重载配置。在部署过程中，提到了hash模式和history模式的区别，history模式可能导致白屏问题，解决办法是调整Nginx配置后重启服务。最后，展示了访问打包后dist目录下的index.html文件来访问应用的方法。

webpack打包后然后
npm run build 然后生成的dist 文件才是我们要上线的文件

用nginx操作
1、下载Nginx

下载地址：http://nginx.org/en/download.html
在这里插入图片描述
下载之后解压到指定文件夹错误点来了！！！ 此路径下不能有中文名称有的话你就不能启动 nginx

然后切换的相应的控制台 nginx启动命令： start nginx 然后在浏览器地址框访问localhost

在这里插入图片描述
显示此页面就打开了

nginx的相关命令
（1）start nginx 开启nginx服务

（2）nginx.exe -s stop 关闭nginx服务，快速停止nginx，可能并不保存相关信息

（3）nginx.exe -s quit 关闭nginx服务，完整有序的停止nginx，并保存相关信息

(4) nginx.exe -s reload 重载nginx服务，当你改变了nginx配置信息并需要重新载入这些配置时可以使用此命令重载nginx
(5) 使用 taskkill /F /IM nginx.exe > nul命令强关nginx服务器

在这里插入图片描述
把打包后的 dist文件放入到html 这个文件夹
然后在浏览器访问 localhost/dist/ 就可以访问了
这个默认是hash 模式
切换history模式会白屏
我们就需要更改配置
还是把打包后的 dist文件放入到html 这个文件夹
然后需要更改 conf这个文件夹里的nginx.conf文件
在这里插入图片描述
然后重启nginx服务器

访问 localhost/dist/index.html