技術標籤：vuenginxvue

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/;   # 專案存放路徑
   			try_files $uri $uri/ html/test1/index.html;  #重新整理404 全部導航到首頁
   		}
   		location /test2/ {
   			alias html/test2/;   # 專案存放路徑
   			try_files $uri $uri/ html/test2/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;
           #}
       }
   
   	
   
   
     
   
   }
    
   

   

4. nginx-t 檢測語法是否正確 ，如果已啟動 請重啟 nginx -s reload ， 未啟動 start nginx

   訪問地址http://localhost/test1/ ---專案1 http://localhost/test2/ ----專案二