Vue History&Nginx 前端部署常见问题分析与解决

Vue History&Nginx 前端部署

完整文章请戳这里：Vue History&Nginx 前端部署 -Aiysosis Blog(aiysosis.ink)

引言

在Vue项目的编码与测试完成后，项目进入到部署阶段，但是在部署时常常会遇到这些问题：

• 开发环境中能完美运行的页面，部署之后打开却出现白屏，打开控制台可以看见一大堆找不到资源的报错和网络错误报错。
• 路由功能失效无法正常跳转。
• 刷新当前页面，或者输入某个具体页面直接访问时却跳转到了404 Not Found 的界面。

基本环境

• Vue 3.X
• Vue-Router 4.X
• Nginx 1.22.0

问题分析与解决

页面白屏

打包后页面白屏的原因主要有三种：

• 本地运行跨域
• 资源路径解析错误
• 路由设置错误
• 三种因素交杂在一起，会让我们错误排查十分困难，但是我们可以先消除一个因素：将网页的路由设置到Hash模式，先排查本地运行跨域和资源路径解析的问题，这两项排查无误后再来解决History模式下的部署问题。

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),//设置为Hash模式
  routes: [
    //...
  ],
})

接下来排查本地运行跨域和资源路径解析问题。

首先是本地运行跨域，如果看到这个报错，那么说明资源的请求被浏览器跨域政策拦截了。

解决方法有两种：你可以选择关闭浏览器的安全策略或者使用 VScode 的 Live Server（推荐）。