vue项目部署 nginx 二级目录刷新404 资源找不到白屏 (history模式)

vue.config.js

  publicPath: `/${process.env.VUE_APP_DIR}/`

router.js

const router = new VueRouter({
  mode: 'history',	//如果是hash模式就不需要nginx重写
  base: `/${process.env.VUE_APP_DIR}/`,
  routes,
});

.env.production

NODE_ENV = 'production'
VUE_APP_DIR = '二级目录名称'
VUE_APP_BASE_URL = 'http://*****.com'

.env.development

NODE_ENV = 'development'
VUE_APP_DIR = '二级目录名称'
VUE_APP_BASE_URL = 'http://*******.com'

package.json 这一步可以忽略 根据个人习惯 自定义打包命令

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "打包测试版": "vue-cli-service build --mode development",
    "打包生产版": "vue-cli-service build --mode production",
    "deploy-aliyun-test": "g-deploy deploy --env aliyunTest"
  },

最后一部重要 修改nginx配置

server {
        listen 80;
        server_name test.*****.com;

        location  /二级目录名称 {  //1
        
            alias /opt/static_projects/test/二级目录名称; //2
            
            try_files $uri $uri/ /二级目录的名称/index.html; //3
        }
        
        location / { //根目录
            root /opt/static_projects/test/;
            try_files $uri $uri/ @router;
            index  index.html;
        }
        
        location @router{
                rewrite ^.*$ /index.html last;
        }
}