前端nginx配置

本文来自我的内部分享，整理发出来。

 

1.安装
菜鸟教程：https://www.runoob.com/linux/nginx-install-setup.html
需要下载PCRE，需要编译安装。

2.配置文件 /nginx/conf
我们关注 nginx.conf文件

http{
    server{
        location /a {
            root /a
        }
        location /b {
              alias /a
         }
    }
}

　　

location 匹配路径{
    root/alias 指向的文件路径
}

　　

匹配路径：

~：正则
^~：唯一匹配，优先匹配

/ 通用匹配

----------
root和alias区别：

location   /test/  {
      alias    /usr/local/;
}
location   /test/  {
      root    /usr/local/;
}

　　

同样请求：/test/1.jpg

alias 找/usr/local/1.jpg这个文件
root 找/usr/local/test/1.jpg

出现404，找/nginx/log/error.log
3.vue路由遇到nginx
对于history模式（我们的项目）

location   /  {
      root    /usr/local/;
      try_files $uri $uri/ /index.html;
}

　　

对于hash模式（默认）不用写try_files

location   /  {
      root    /usr/local/;
      index  index.html
}

　　

4.命令

/nginx/sbin/nginx                      # 启动
/nginx/sbin/nginx -s reload            # 重新载入配置文件
/nginx/sbin/nginx -s reopen            # 重启 Nginx
/nginx/sbin/nginx -s stop              # 停止 Nginx

　　

/nginx前面有路径，安装时候的位置。

其中，/nginx/sbin/nginx -s reopen 并不会重新加载新的配置文件

/nginx/sbin/nginx -s reload  可以重新加载配置文件

5.我们现在的配置

 server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        #匹配用户端，vue vue-router:history项目
        location / {
       root   /home/frontuser/front_project/commercial_service/dist;
       try_files $uri $uri/ /index.html;
        }

        #匹配static
       location ^~ /static/ {
            alias /usr/local/static/;
        }

        #匹配后台管理系统，vue,vue-router:history
       location ^~ /admin/ {
       alias   /home/frontuser/front_project/commercial_service_admin/dist/;
       index index.html;
       try_files $uri $uri/ /admin/index.html;
       }
 }

　　这样实现了2个vue项目，路由history模式的部署，一个的访问路径是根路径：/，一个是二级目录：/admin

　　管理后台项目commercial_service_admin的publicPath要做改变，对于vue-cli3来说，修改vue.config.js为：

　　

commercial_service_admin/vue.config.js

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/admin/' : '/'
}

　　

commercial_service_admin/router

const router = new Router({
    mode: 'history',
    base: '/admin/',
    routes: [
        ...constantRoutes
    ],
    scrollBehavior(to, from, savedPosition) {
        return { x: 0, y: 0 }
    }
})