这里主要以 vuepress 和 vue 后台系统 为例

一、项目打包文件路径配置

  1. vuepress
    1
    2
    3
    {
    	base: '/blog/'
    }
  2. vue

    vue.config.js

    1
    2
    3
    {
    	publicPath: process.env.NODE_ENV === 'production' ? '/front-system/': '/'
    }

    vue-router

    1
    2
    3
    4
    5
    6
    const router = new VueRouter({
      mode: 'history',
      // base: process.env.BASE_URL,
      base: '/front-system/',
      routes: containRouters
    })

    二、nginx 配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    server{
    	gzip on; # 开启gzip
    	gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding，建议开启
    	gzip_proxied any;
    	gzip_min_length 5k; # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
    	gzip_comp_level 5; # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
    	gzip_buffers 16 8k; # 设置 gzip 申请内存的大小,其作用是按块大小的倍数申请内存空间
    	gzip_http_version 1.1;
    	# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
    	gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss;
    	gzip_disable "msie6"; # 禁用IE 6 gzip

    	listen       8098;
           server_name  localhost;


    	location / {
               proxy_pass http://127.0.0.1:8098/front-system/;
           }

    	location  /front-system/ {
      		try_files $uri $uri/ /front-system/index.html;
           }
    	# js、css 静态资源缓存配置
    	location ~* \.(md|wav|gif|jpg|jpeg|png|bmp|ico|css|js|txt|woff|woff2|ttf|svg|docx|doc|xlsx|xls|pptx|ppt|pdf|map|json|zip|apk|mp4|php|swf).*$ {
    		expires 60s; # 缓存60s，生产环境建议 30 天
    	}
       }	

       server {
           listen       8099;
           server_name  localhost;

           #charset koi8-r;

           #access_log  logs/host.access.log  main;

    	location / {
    		proxy_pass http://127.0.0.1:8099/blog/;
    	}

           location  /blog/ {
     	 	try_files $uri $uri/ /blog/index.html;
           }

    	 	# js、css 静态资源缓存配置
    	location ~* \.(md|wav|gif|jpg|jpeg|png|bmp|ico|css|js|txt|woff|woff2|ttf|svg|docx|doc|xlsx|xls|pptx|ppt|pdf|map|json|zip|apk|mp4|php|swf).*$ {
    		expires 60s; # 缓存60s，生产环境建议 30 天
    	}
           #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;
           }

       }

    重启nginx服务

    1
    ./nginx -s reload

    nginx 静态资源目录

    注:

    把 dist 里的文件复制到 /blog/xxx 下， 例如： /blog/index.html