nginx代理前端html

1. 正常配置，通过www.example.com或192.168.20.12:80访问

   server {
       listen 80;
       server_name example.com www.example.com;
   
       root /var/www/html;
       index index.html index.htm;
   
       location / {
           try_files $uri $uri/ =404;
       }
   }
   
   

解释：

• listen 80;：监听 HTTP 端口 80
• server_name example.com www.example.com;：你的域名，可以根据实际情况修改。
• root /var/www/html;：HTML 文件的根目录。
• index index.html index.htm;：默认的主页文件。
• location / { try_files $uri $uri/ =404; }：尝试找到请求的文件或目录，如果找不到则返回 404。

2. 略微不正常，通过www.example.com/h5访问

   server {
       listen 80;
       server_name example.com www.example.com;
   
       location /h5 {
           alias /var/www/html;
           index index.html index.htm;
           try_files $uri $uri/ =404;
       }
   }
   

解释：

• location /h5：处理 /h5 路径的请求
• alias /var/www/html：将 /h5 路径别名为 /var/www/html，即访问www.example.com/h5 实际上是访问 /var/www/html 目录中的文件

同时VUE项目中也要稍微改动一下

const router = new VueRouter({
  mode: 'history',
  base: '/h5',
  routes: [
    // 你的路由配置
  ]
});