如何将vue工程部署到nginx下

如何将vue工程部署到nginx下

下载nginx

官网:http://nginx.org/en/download.html

将打包编译好的前端工程放到nginx下的目录下

我这里是新建了一个名为'www'的文件夹，可以自己命名

image.png
image.png

修改nginx的配置文件

image.png

关键配置信息

listen       8090;
        server_name  localhost;
        location / {
            root  www/dist; //只想index的页面
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }
        location @router { //配合vue中的router使用
            rewrite ^.*$ /index.html last;
        }
        
        location /east {
            root  www/dist;
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }
        
        location @router {
            rewrite ^.*$ /index.html last;
        }
        //静态资源的指向路径
        location ~ .*\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt)$ {
            root www/dist;
            proxy_temp_path www/dist;
        }