前端Nginx打包上线

有没有修改路由模式需求有的话去router文件夹下面的index上面加 mode:'history'

vue项目

终端执行 npm run build 生成 dist 文件

Nginx部署

• 下载Nginx 参考链接：blog.csdn.net/qq_33454884…
• 官方网址：nginx.org/en/download…
• （最好放下英文文件夹下）
• 打开下载好的文件夹：把nginx.conf在vscode中打开

修改nginx.conf内容

然后启动nginx 浏览器输入你刚刚改的端口号

Nginx Windows基本操作

刷新页面会显示404报错解决和500问题

# nginx.conf
location / {
    root   C:\Users\17542\Desktop\project-v2\dist;
    index  index.html index.htm;
    try_files $uri $uri/ @router; # 解决页面刷新404问题
}

location @router {
    rewrite ^.*$ /index.html last; # Vue项目路由不是真实存在的
}

如果不成功去后台把nginx后台清除，重新打开nginx即可 成功之后会报405的错误，报405就说明前端的配置已经结束，剩下的交给后端