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

原文地址：原文地址

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

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

前言

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

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

大家可能遇到过这种情况：上线后通过 router-link 标签或 $router.push 方法访问特定的地址页面正常显示，而刷新或者直接访问就会页面显示空白或404，就像这样：

问题解析

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

解决方法

第一种：前端

不推荐，个人感觉 hash 模式超级丑！
在 router/index.js 里更改 mode 为 hash

第二种：后端：

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

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

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

开发模式时，我们设置里 devServer.proxy 跨域本地代理，且功能正常，但当我们更换 target 为 服务器后端接口地址上线后，却发现无法访问或者出现这种文字：
We’re sorry but myapp doesn’t work properly without JavaScript enabled. Please enable it to continue.

问题解析

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

解决方法

第一种：前端

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

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

第二种：后端：

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

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

更多

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