vue打包分两种模式。详细可以看下官方的说明不同的历史模式 | Vue Router (vuejs.org)

本文主要记录一下，vue前后端分离的php项目 使用历史模式打包后放到php项目的根目录后 服务器配置这里的一个小坑。 

Hash 模式 

打包后路径带有#号

HTML5 模式

打包后可以去除路径中的#号，但是这里需要服务器修改配置

查看了官方给的修改配置是这样。如果是打包后放到php项目根目录 发现配置还是需要微调一下 

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

以下是两种改良之后的服务器配置方案，小P或者宝塔只需要将原来的伪静态改为以下即可。

thinkphp 伪静态

location ~* (runtime|application)/{
	return 403;
}
location /api {
	if (!-e $request_filename){
		rewrite  ^(.*)$  /index.php?s=$1  last;   break;
	}
}

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

laravel 伪静态

location /api {
    try_files $uri $uri/ /index.php?$query_string;
}

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

强制刷新浏览器或使用无痕浏览器 重新打开网址。