服务器部署vue项目（练手）

1，远程服务器中安装nginx

可见阿里云服务器系统（linux）配置nginx

2，本地打包项目

本地打包项目：

npm run build

生成一个dist文件夹，默认是dist文件夹。
将这个文件夹进行压缩生成dist.zip
将这个zip文件通过xftp传输到服务器上。
对其进行解压。

修改Nginx的conf文件

vi /usr/local/nginx/conf/nginx.conf

#修改内容
server {
  # 声明监听的端口
  listen 80;
  # 如有多域名映射到同一端口的，可以用server_name 区分，默认localhost
  server_name localhost;

  # 匹配'/'开头的路径 注意设定 root路径是有dist的
  location / {
    # 指定文件的根目录，主要结尾不要带/   我的项目是放再了/usr/local/my_project目录下
    root /usr/local/my_project/dist;
    # 指定默认跳转页面尾 /index.html
    index /index.html;
  }

  # 匹配'/adminApi'开头的路径进行跨域 ip和port自行替换
  # adminApi 是vue.config.js中的proxy声明的
  location /adminApi {
    proxy_pass http://ip:port;
  }
}

3，看nginx配置是否生效

# 进入nginx 安装目录，yum安装的直接使用nginx代替sbin/nginx
# 检查配置文件合法性 
sbin/nginx -t
# nginx 热更新配置
sbin/nginx -s reload

4，访问项目，看是否生效