Vue打包上线服务器的坑及解决方法时光大魔王

时光小灶

2022 年 08 月 28 日

935 次浏览

暂无评论

1791字数

学习笔记代码学习

> **想必各位老大在Vue开发时都遇到过这种情况：
> 开发模式各项模块功能和代理都正常，但当满心欢喜地Build打包后上线服务器，却发现有一堆Bug，比如代理不生效、刷新页面变空白等情况**

> **接下来我将整理一些我遇到过的问题和自己常用的解决方法，望各位学习采纳，有不足和没提到的请在评论区里交流学习。原创文章，请勿抄袭！**

# 前言

**主要是Vue2，Vue3还没具体实操过，不过大致解决方案类似~【滑稽】**

# 一、访问或刷新目标地址页面后显示空白或404

**大家可能遇到过这种情况：上线后通过 **`router-link` 标签或 `$router.push` 方法访问特定的地址页面正常显示，而刷新或者直接访问就会页面显示空白或404，就像这样：![在这里插入图片描述](https://img-blog.csdnimg.cn/f848d89d9b9145cd9907e225f0e5ec73.png#pic_center)

## 问题解析

**vue是个单页应用，它的路由是模拟的url，并没有在服务器上真实存在，当然访问不到！**

## 解决方法

### 第一种：前端

**不推荐，个人感觉 **`hash` 模式超级丑！**
**在 `router/index.js` 里更改 `mode` 为 `hash`
![在这里插入图片描述](https://img-blog.csdnimg.cn/529716060d814004b85cf8db6587a6f5.png#pic_center)

### 第二种：后端：

**在服务器站点配置里添加：**

```
location / {
try_files $uri $uri/ /index.html;
}
```

![在这里插入图片描述](https://img-blog.csdnimg.cn/268a0ec8c0b644ef91ba9278127be0e5.png#pic_center)

# 二、devServer.proxy 跨域代理上线后不正常

**开发模式时，我们设置里 devServer.proxy 跨域本地代理，且功能正常，但当我们更换 target 为 服务器后端接口地址上线后，却发现无法访问或者出现这种文字：**
**We're sorry but myapp doesn't work properly without JavaScript enabled. Please enable it to continue.**
![在这里插入图片描述](https://img-blog.csdnimg.cn/449830c9288840988c373f8a968c98e3.png#pic_center)

## 问题解析

[Concise200](https://blog.csdn.net/qq_45890970?type=blog) 说：**
**因为在vue.config.js中配置的devServer.proxy只是在开发环境下将请求代理到后端服务器的本地服务，我们把项目打包成dist文件只把我们的组件等资源打包了，并不会将代理服务器给打包，所以项目中的请求路径不完整导致访问不到对应资源

## 解决方法

### 第一种：前端

**把项目的所有网络请求的 url 都改成完整接口地址【画外音：这不就摸鱼理由来了嘛，滑稽】**

**其它方法似乎没有，大佬们如果有的话请分享~**

### 第二种：后端：

**在服务器站点配置里添加：**
**(注：配合问题一的解决方法的代码一起食用更香哟~)**

```
location ^~/api/ {
proxy_pass http://xxx.cn/;// 这里是你需要代理的后端接口地址
}
```

![在这里插入图片描述](https://img-blog.csdnimg.cn/97f38bdf36b34d5e96cd1299995b62cf.png#pic_center)

# 更多

**还在搜集，遇到了再整理~**

最后修改：2022 年 08 月 28 日