nginx下 部署多个vue项目

一：hash模式

1. 准备两个项目 一个test1 一个test2
2. vue模式  （hash--带#）
3. router.js 正常逻辑 无改动

   const createRouter = () =>
      new Router({
       scrollBehavior: () => ({ y: 0 }),
       routes: constantRoutes
    });

   vue.config.js: 设置publicPath 

   //module.exports下 
       
       publicPath: "/test1/" ，
    //test指代nginx的放置vue文件的文件夹名称 如果按环境配置的话 可在配置文件中添加
     //  VUE_APP_publicPath = '/test1/' 这样上述path修改为
       publicPath: process.env.VUE_APP_publicPath || "/"，

   3. nginx.conf配置    nginx-1.16.1/conf/nginx.conf 文件

   http {
       include       mime.types;
       default_type  application/octet-stream;
   
       #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
       #                  '$status $body_bytes_sent "$http_referer" '
       #                  '"$http_user_agent" "$http_x_forwarded_for"';
   
       #access_log  logs/access.log  main;
   
       sendfile        on;
       #tcp_nopush     on;
   
       #keepalive_timeout  0;
       keepalive_timeout  65;
   
       #gzip  on;
   
       server {
           listen       80;  #监听80端口
           server_name  localhost;
   
           #charset koi8-r;
   
           #access_log  logs/host.access.log  main;
   
           location / {
               root   html;
               index  index.html;
           }
   		location /test1/ {
   			alias html/test1/;   # 项目存放路径
   		}
   		location /test2/ {
   			alias html/test2/;   # 项目存放路径
   		}
           #error_page  404              /404.html;
   
           # redirect server error pages to the static page /50x.html
           #
           error_page   500 502 503 504  /50x.html;
           location = /50x.html {
               root   html;
           }
   
           # proxy the PHP scripts to Apache listening on 127.0.0.1:80
           #
           #location ~ \.php$ {
           #    proxy_pass   http://127.0.0.1;
           #}
   
           # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
           #
           #location ~ \.php$ {
           #    root           html;
           #    fastcgi_pass   127.0.0.1:9000;
           #    fastcgi_index  index.php;
           #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
           #    include        fastcgi_params;
           #}
   
           # deny access to .htaccess files, if Apache's document root
           # concurs with nginx's one
           #
           #location ~ /\.ht {
           #    deny  all;
           #}
       }
   
   	
   
   
     
   
   }

   

4. nginx-t 检测语法是否正确 ，如果已启动 请重启 nginx -s reload ， 未启动 start nginx

   访问地址 http://localhost/test1/   ---项目1  http://localhost/test2/      ----项目二           

二。history模式 单个项目（多个项目配置别名不同）

1.准备项目 test

2.router.js 修改base  vue3.0的话 移除base使用history属性 相关函数进行配置模式和基础路径

  2.0  

const createRouter = () =>
   new Router({
    base:"/abc/",
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
 });

 3.0

import { createRouter, createWebHistory} from "vue-router";
const router = createRouter({
  history: createWebHistory('/abc/'),
  routes:constantRoutes
});

vue.config.js: 设置publicPath 

//module.exports下 
    
    publicPath: "/abc/" ，
 //test指代nginx的放置vue文件的文件夹名称 如果按环境配置的话 可在配置文件中添加
  //  VUE_APP_publicPath = '/abc/' 这样上述path修改为
    publicPath: process.env.VUE_APP_publicPath || "/"，

3. nginx.conf配置

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;  #监听80端口
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

		location /abc/ {
			alias html/test/;   # 项目存放路径
            index  index.html;
			try_files $uri $uri/ /test/index.html;  #刷新404 全部导航到首页
		}
		
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

	


  

}

访问  http://localhost/abc/