博客

1.多个端口形式 ，nginx 默认代理80 端口 ，我们可以把其他项目部署到其他端口

修改 nginx.conf  我的在 usr/local/nginx/conf/nginx.conf    修改 vim nginx.conf

在http 模块内加上一行命令   include /etc/nginx/conf.d/*.conf;  可以自定义路径保持一致就行，这个就像子组件一样 ，当nginx执行

nginx.conf  时 ，会加载

include /etc/nginx/conf.d 文件下的 所有 conf 配置文件，我们在 这些文件可以写 nginx.conf 相同的内容。 nginx.conf 默认代理的是 80 端口，我们可以 在 子文件  conf 中代理其他的端口

nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    include /etc/nginx/conf.d/*.conf;
   
    sendfile        on;

    keepalive_timeout  65;
    
    server {
        listen       80;
        server_name  localhost;
        gzip on;
        gzip_min_length 1k;
        gzip_comp_level 9;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.";
       
        
        location / {
            root   html/dist;
            index  index.html index.htm;
         }
         
          location /cn {
            alias   html/en;
            index  index.html index.htm;
         }
         
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

      

    }

}

/etc/nginx/conf.d/cn.conf

server {
    listen       81;
    server_name  localhost;
 
    
 
    location / {
          root   html/cn;
          index  index.html index.htm;
        }
 
   
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
 
   
}

效果

第一个使用 默认 80 端口 ， 第二个使用路由 ，第三个使用 81端口

我的所有项目 都在 usr/local/nginx/html 中 ，当你使用 路由形式 要 修改 项目打包 时的配置

在

vue.config.json 配置项  加上  publicPath  和 vue-router 添加 base配置项

module.exports = defineConfig({
  publicPath:'/cn/',
  transpileDependencies: true,
  lintOnSave: false,
  ....

})

let router = new VueRouter({
  routes,
  base:'/cn/'
});

添加的名称 就是需要 在地址栏访问的 字段