Nginx配置-vue项目（二）

Nginx配置-vue项目

vue项目打包

# 打包正式环境
npm run build:prod

# 打包预发布环境
npm run build:stage

#这里打包需要注意pulicPath

打包成功后会生成dist文件，copy目录到nginx/html目录下即可

#这里默认是监听80端口
#访问路径 http://localhost/dist/index.html

Nginx配置

./conf/nginx.conf文件

这里我配置监听8000端口，访问 “/” 时找到 html/hotel-front项目

配置后端代理

server {
        listen       8080; #访问端口
        server_name  localhost;
        location / {
           root html/dist; #前端dist包地址
           index  index.html index.htm;
           try_files $uri $uri/ /index.html;
        }
        #后端接口代理 localhost:8080/api 会监听到
        location /api/ {
         	proxy_set_header x-forwarded-for  $remote_addr;
        	proxy_pass http://xx.xx.xx.xx:8080/; #后端代理真实地址
        }
    	charset utf-8;
    }