vue项目打包发布上线方法

vue项目开发完毕后，我们需要将项目打包上线，同时我们希望可以在本地预览生产环境项目。（以下以vue-cli脚手架生成的项目为例）

发布服务器

1、运行打包命令

npm run build

运行后生成dist文件夹,将dist文件夹发布在服务器中。

我们在nginx中通过代理来访问：

首先本地的代码在额米有打包之前：

 在执行npm run build之后会在本地项目的根目录下面生成一个dist目录：

 接着我们通过nginx代理来访问，NGINX配置如下：

server {
        listen    80;
        server_name lch.vue.com;
        
        location / {
            proxy_pass http://127.0.0.1:8091;
            proxy_http_version 1.1;
            proxy_redirect  off;
            proxy_connect_timeout 30;
            proxy_set_header Host $host:$server_port;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            #proxy_cache cache_one;
            proxy_cache_valid   200 304 24h;
            proxy_cache_valid   any     10m;
            add_header  Nginx-Cache     "$upstream_cache_status";
            proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;

        }
}

server {
     gzip on;
    gzip_static on;
    gzip_min_length 50k;
    gzip_comp_level 1;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php;
        gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
    gzip_buffers 32 4k;
    gzip_http_version 1.0;
        listen    8091;
        access_log /var/log/nginx/lch.vue.com.log;
        server_name  127.0.0.1;
        location / {
                root /htdocs/demo/vue-demo/dist;
                try_files $uri $uri/ @router;
                index index.html;
        }
        location ~ (favicon.ico) {
                expires 365d;
        }
        location ~* \.(js|css|jpeg|jpg|bmp|gif|png|doc|docx|xls|xlsx|rar|zip|svg|otf|eot|svg|ttf|woff|woff2)$ {
                root /htdocs/demo/vue-demo/dist/;
                expires 30d;
        }
        location @router {
                rewrite ^.*$ /index.html last;
        }

}

保存，重新启动nginx,当然了我这个是本地域名，需要绑定hosts:

 再次访问：lch.vue.com 可以看到如下的页面：

 

 这样的话vue前端项目打包通过Nginx代理就可以访问了。