vue 打包后 使用 history 模式 在nginx 的配置

nginx配置文件代码

server
{
    listen 80;
    server_name cool.vpring.xyz;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/cool.vpring.xyz;

    #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    #SSL-END

    #ERROR-PAGE-START  错误页配置，可以注释、删除或修改
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END

    #PHP-INFO-START  PHP引用配置，可以注释或修改
    #清理缓存规则

    location ~ /purge(/.*) {
        proxy_cache_purge cache_one $host$1$is_args$args;
        #access_log  /www/wwwlogs/cool.vpring.xyz_purge_cache.log;
    }
	#引用反向代理规则，注释后配置的反向代理将无效
	include /www/server/panel/vhost/nginx/proxy/cool.vpring.xyz/*.conf;

	include enable-php-00.conf;
    #PHP-INFO-END

    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    include /www/server/panel/vhost/rewrite/cool.vpring.xyz.conf;
    #REWRITE-END

    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }

    #一键申请SSL证书验证目录相关设置
    location ~ \.well-known{
        allow all;
    }
    # ------------  自定义配置开始  -----------------
    #后端接口
    location /api/ {
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://localhost:8088/;
		}
		# 相当于把地址 指向自己
		location / {
      root /www/wwwroot/cool.vpring.xyz; # 这里需要看你打包的前端项目放在服务器的那个目录下, 有的教程没有这一步
      #index index.html; # 很多教程说需要配置这一步, 自己测试好像不需要
      try_files $uri $uri/ /index.html; # 如果没有配置上边root 那一行,你的项目又是在某个目录下, 请加目录不然找不到 栗子: try_files $uri $uri/ /dist/index.html
  }
   # ------------  自定义配置结束  -----------------

    access_log  /www/wwwlogs/cool.vpring.xyz.log;
    error_log  /www/wwwlogs/cool.vpring.xyz.error.log;
}