element-ui项目部署到Nginx非根目录下页面出现空白的问题

此处是 nginx的配置

         # cms访问目录
        location / {
            root  /usr/local/nginx/ynet/cms;
	        try_files $uri $uri/ @router;
            index  index.html index.htm;
        }
        
        #comm_cms 的访问目录  (非根目录部署 )
	    location /comm {
            alias /usr/local/nginx/ynet/comm;
            try_files $uri $uri/ /comm/index.html;
	        index  index.html index.htm;
        }

	    location @router {
	        rewrite ^.*$ /index.html last;
	    }

前端需要改配置的地方 ,
1 在 src\router\index.js 路由目录下修改如下配置

	const createRouter = () =>
	  new Router({
	    mode: 'history', // require service support
	    base:'/comm/', // 注意此处是需要添加的,正常情况是没有的,,,
	    scrollBehavior: () => ({ y: 0 }),
	    routes: constantRoutes
	  })
	
	const router = createRouter()    
        

图:

2 修改vue.config.js 配置文件

  // publicPath: '/', 原配置 ,,改成楼下的
  publicPath: '/comm',  //这里加上 comm 
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,

如图所示: