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代理就可以访问了。