1.安装Nginx 并将项目打包
安装教程 Windows 安装 Nginx
打包步骤
通过命令行工具,或者编译器都可以
进入项目路径中,使用命令打包
npm run build
打包后会在项目文件夹中出现一个名为 dist 的文件夹,表示打包成功
2.将打包好的vue项目,也就是 dist 文件夹内的内容 粘贴到 nginx 文件夹下的 html 文件夹内

3.修改 nginx conf 文件夹 中的 nginx.conf

将 root 修改为 html 的路径
4.启动访问即可完成
启动 nginx 命令,需要进到 nginx 的目录中
start nginx
或者双击 nginx.exe

查询 nginx 服务器是否启动成功
tasklist /fi "imagename eq nginx.exe"
关闭所有 nginx 服务器
taskkill /f /t /im nginx.exe
5.解决路由中使用 history 导致 404 的问题,将以下代码放到 location 中 index 下面即可,如若使用的是 hash 那么请忽略本步骤
#解决404
try_files $uri $uri/ /index.html;


本文详细介绍了如何在Windows上安装Nginx,利用npm打包Vue项目,将dist文件夹内容部署到Nginx并配置路由,解决404问题。步骤包括安装Nginx、打包项目、调整配置文件和启动访问。
3154

被折叠的 条评论
为什么被折叠?



