nginx部署vue 二级目录

以win为例：下载nginx，解压。然后在解压目录（有nginx.exe的目录）地址栏输入cmd，打开cmd窗口

启动nginx

start nginx

重启nginx

nginx -s reload

修改conf文件夹中的nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {


    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
       
            location / {
            root  dist;#这里存放的是你根目录的网站文件，可以不用管
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

    location /admin {
            alias  你新打包的带二级目录的dist文件夹;
            try_files $uri $uri/ /admin/index.html;#这里要加上你的二级目录名称
            index  index.html index.htm;
        }



        
        location /prod-api/{
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8080/;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

}

若依vue修改：

1：修改router/index.js

export default new Router({
  base:'admin',//添加二级目录的名称
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

2：修改vue.config。添加admin二级目录名称

  publicPath: process.env.NODE_ENV === "production" ? "/admin/" : "/admin/",

3：修改loginout.vue

在跳转前面加上admin

4：在public文件夹里面的所有路径都要加 ./