解决vue打包后刷新问题

问题描述：

以vue打包后运行再django后端为例， 当部署再django后端口，正常访问网页没问你，从页面中跳转也没问题，但是当跳转到非入口页面后，如果此时刷新页面就会报错，说页面路由不存在；

解决办法：由于vue打包后只有一个页面文件，所以在这个页面每次访问时通过js动态获取当前url，然后从url中分割出来具体的路径，之后通过vue中的app.$router.push(path)跳转到相应的页面即可；

具体实施：

首先再vue项目中的main.js中加入一下代码：

var url = window.location.href;
url = url.split(window.location.host)[1]
console.log("url", url)
app.$router.push(url);

// 解释：在刷新页面后利用vue中的方法router.push(url)动态跳转到vue中的页面，

然后打包vue项目:

npm run build

django后端路由配置：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('app/', include('app.urls')),
    url(r'^[a-zA-Z]*', index)  # 将访问的所有关于vue的路径都指向index页面
]
# 注意这里的顺序，最好把通用匹配放到最后

视图函数：

@csrf_exempt
def index(request):
    return render(request, "index.html")