1.Vue路由打包方式

（1）hash方式

即地址栏后面带#号的方式。
可以设置vue.config.js或者config.js，总之就是配置vue的地方。一般长这样：
1657778193936.png
首选设置：publicPath,可以使用./设置相对路径，这样打包完的静态文件放到网站任何位置都可以，此时设置src/routers/index.js文件，设置路由模式为hash，如下：

  1. export default new Router({
  2.   mode: 'hash', // 去掉url中的#
  3.   scrollBehavior: () => ({ y: 0 }),
  4.   routes: constantRoutes
  5. })

（2）history方式

即地址栏中显示的path路径，拼接方式为：主路径+路由路径
这种方式下，publicPath必须使用相对站点根目录的路径方式，
例如：https://www.baidu.com/vue/test/index.html，像这样的地址路径，则publicPath必须设置为/vue/test
同时需要设置路由history模式并设置base为/vue/test：

  1. export default new Router({
  2.   mode: 'history', // 去掉url中的#
  3.   base: '/vue/test',//根目录相对路径
  4.   scrollBehavior: () => ({ y: 0 }),
  5.   routes: constantRoutes
  6. })

2.nginx配置

（1）配置转发

对于hash模式，nginx只需要配置静态路径的转发即可。但是对history需要做如下转发设置。

  1. server {
  2.         listen       80;
  3.         server_name  localhost;
  4.         # 非根目录的转发
  5.         location ^~ /vue/test {
  6.             index  index.html index.htm;
  7.             alias html/admin;
  8.             try_files $uri $uri/ /admin/index.html;
  9.         }
  10.         # 根目录的转发
  11.         location / {
  12.             root   html;
  13.             index  index.html index.htm;
  14.             add_header Cache-Control no-store;
  15.             if (!-e $request_filename) {
  16.                 rewrite ^(.*)$ /index.html?s=$1 last;
  17.                 break;
  18.             }
  19.         }
  20. }

（2）开启GZIP压缩

  1.   gzip  on;
  2.     gzip_http_version 1.1;
  3.   gzip_vary on;
  4.   gzip_comp_level 6;
  5.   gzip_proxied any;
  6.   gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  7.   gzip_min_length 1k;
  8.     gzip_buffers 16 8k;
  9.   gzip_disable "MSIE [1-6]\.";

（3）完整配置文件

  2. #user  nobody;
  3. worker_processes  1;
  5. #error_log  logs/error.log;
  6. #error_log  logs/error.log  notice;
  7. #error_log  logs/error.log  info;
  9. #pid        logs/nginx.pid;
  12. events {
  13.   worker_connections  1024;
  14. }
  17. http {
  18. include       mime.types;
  19. default_type  application/octet-stream;
  21. #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
  22. #                  '$status $body_bytes_sent "$http_referer" '
  23. #                  '"$http_user_agent" "$http_x_forwarded_for"';
  25. #access_log  logs/access.log  main;
  27. sendfile        on;
  28. #tcp_nopush     on;
  30. #keepalive_timeout  0;
  31. keepalive_timeout  65;
  32. server_tokens off;
  33. proxy_hide_header X-Application-Context;
  34. proxy_hide_header Server;
  36. gzip  on;
  37. gzip_http_version 1.1;
  38. gzip_vary on;
  39. gzip_comp_level 6;
  40. gzip_proxied any;
  41. gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  42. gzip_min_length 1k;
  43. gzip_buffers 16 8k;
  44. gzip_disable "MSIE [1-6]\.";
  46. server {
  47.   listen       80;
  48.   server_name  localhost;
  50.   #charset koi8-r;
  52.   #access_log  logs/host.access.log  main;
  54.   location ^~ /prod-api {
  55.     proxy_pass   http://127.0.0.1:8080;
  56.     index  index.html index.htm;
  57.     proxy_set_header Host $host;
  58.     proxy_set_header X-Real-IP $remote_addr;
  59.     proxy_set_header REMOTE-HOST $remote_addr;
  60.     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  61.     set $realip $remote_addr;
  62.     if ($http_x_forwarded_for ~ "^(\d+\.\d+\.\d+\.\d+)") {
  63.     set $realip $1;
  64.     }
  65.     fastcgi_param REMOTE_ADDR $realip;
  66.   }
  68.   location ^~ /admin {
  69.     index  index.html index.htm;
  70.     alias html/admin;
  71.     try_files $uri $uri/ /admin/index.html;
  72.   }
  74.   location / {
  75.     root   html;
  76.     index  index.html index.htm;
  77.     add_header Cache-Control no-store;
  78.     if (!-e $request_filename) {
  79.       rewrite ^(.*)$ /index.html?s=$1 last;
  80.       break;
  81.     }
  82.   }
  84.   #error_page  404              /404.html;
  86.   # redirect server error pages to the static page /50x.html
  87.   #
  88.   error_page   500 502 503 504  /50x.html;
  89.   location = /50x.html {
  90.     root   html;
  91.   }
  93.   # proxy the PHP scripts to Apache listening on 127.0.0.1:80
  94.   #
  95.   #location ~ \.php$ {
  96.   #    proxy_pass   http://127.0.0.1;
  97.   #}
  99.   # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
  100.   #
  101.   #location ~ \.php$ {
  102.   #    root           html;
  103.   #    fastcgi_pass   127.0.0.1:9000;
  104.   #    fastcgi_index  index.php;
  105.   #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
  106.   #    include        fastcgi_params;
  107.   #}
  109.   # deny access to .htaccess files, if Apache's document root
  110.   # concurs with nginx's one
  111.   #
  112.   #location ~ /\.ht {
  113.   #    deny  all;
  114.   #}
  115.   }
  118.   # another virtual host using mix of IP-, name-, and port-based configuration
  119.   #
  120.   #server {
  121.   #    listen       8000;
  122.   #    listen       somename:8080;
  123.   #    server_name  somename  alias  another.alias;
  125.   #    location / {
  126.   #        root   html;
  127.   #        index  index.html index.htm;
  128.   #    }
  129.   #}
  132.   # HTTPS server
  133.   #
  134.   #server {
  135.   #    listen       443 ssl;
  136.   #    server_name  localhost;
  138.   #    ssl_certificate      cert.pem;
  139.   #    ssl_certificate_key  cert.key;
  141.   #    ssl_session_cache    shared:SSL:1m;
  142.   #    ssl_session_timeout  5m;
  144.   #    ssl_ciphers  HIGH:!aNULL:!MD5;
  145.   #    ssl_prefer_server_ciphers  on;
  147.   #    location / {
  148.   #        root   html;
  149.   #        index  index.html index.htm;
  150.   #    }
  151.   #}
  153. }