[JavaScript知识库]vue router 使用 history模式时通过prop路径传参刷新报错问题解决

问题描述

情况是这样的，做博客系统时我希望我的博文路径是这样的：

https://我的i域名/blog/博文ID/文章题目

后面的博文ID和文章题目是属于参数，类似restful这样请求格式，主要是为了美观，不想使用带有“#”这种的路径。但是在使用了history模式后跳转到这个路径没问题，当我刷新这个页面后页面空白，然后控制台报如下的错误：

Uncaught SyntaxError: Unexpected token '<'

经过上网查询发现这个是由于publicPath设置的有问题，之前我一直没有用history模式，打包的时候publicPath使用的是“./”。

解决方法

在vue.config.js配置文件中将publicPath改为“/”，即指定为根目录。这样再次刷新时就不会又问提，注意我这里刷新是指的我打包后放到Nginx服务器里进行刷新的，因为history模式需要服务器的配合。
在Nginx配置文件中对应的映射配置中增加如下配置：

try_files $uri $uri/ /index.html;

我的配置如下：

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

问题解决，记录一下。