Linux 部署vue項目(使用nginx)

1.部署Nginx

請參考Linux下部署nginx，此處不再重復

2.Vue項目打包

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

# 打包預發布環境
npm run build:stage

3. 部署時可能會發現資源路徑不對 ,只需修改 vue.config.js下 文件資源路徑

# 請根據自己路徑來配置更改
publicPath: './'

4. 將打包后的dist文件夾上傳至服務器

本次項目路徑為 /usr/local/webapp/

5.修改Nginx的conf文件

vim /usr/local/nginx/cong/nginx.conf

#修改如下
server {
  listen 80;
  server_name localhost;

  # 注意設定 root路徑是有dist的
  location / {
    root /usr/local/webapp/dist;
    index /index.html;
  }

  #跨域 ip和port自行替換
  location /adminApi {
    proxy_pass http://ip:port;
  }

}

6. 使配置生效

sbin/nginx -s reload
sbin/nginx -s stop
sbin/nginx

7.訪問ip地址查看效果