Vue history模式 nginx 配置

一、前端

查看publicPath路径

  publicPath:  "/app/home/", //修改为自己的路径

二:Nginx

## web dist
        location /sub/home {
            #添加跨域
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Headers X-Requested-With;
            add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
            #添加路径
            alias   /usr/local/var/www/dist; #此处放包路径
            index  index.html index.html;   
            try_files $uri $uri/ /app/home/index.html;  #刷新出现404问题
        }

web api 接口配置

location /api{ #api修改成自己接口前缀和vue.config.js, devServer.proxy 里一样

            # 添加跨域
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Headers X-Requested-With;
            add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
          
            alias /usr/local/var/www/dist; #此处放包路径
            proxy_pass http://172.29.00.00:9090; #服务器接口地址,修改成自己接口ip地址或域名

        }

你可能感兴趣的:(Vue history模式 nginx 配置)