Vue项目部署到阿里云服务器

服务器系统：CentOS
推荐使用FinalShell这个终端软件来连接云服务器

配置nginx

• 安装nginx相关依赖

  yum -y install pcre*
  yum -y install openssl*
  

• 下载wget（类似于迅雷，下载文件）

  yum install wget
  

• 下载nginx，下载到对应目录，一般都在usr/local

  cd usr/local
  wget http://nginx.org/download/nginx-1.26.0.tar.gz
  # 刷新可以看到刚下载的压缩包
  

• 解压nginx压缩包

  tar -zxvf nginx-1.26.0(上一步下载的安装包)
  

• 编译安装

  # 进入解压的文件夹里面
  cd nginx-1.26.0
  ./configure
  make && make install
  # 会产生一个 nginx文件，所有的操作都在这个里面
  

• 进入nginx文件里面sbin，启动nginx

  ./nginx
  

设置安全组

• 阿里云设置安全组，设置入方向的 http/https 访问规则 。授权对象：0.0.0.0/0

部署项目

• 进入Vue项目执行打包命令，把打包后的文件放到服务器的/usr/local/nginx/html目录下

# 执行该命令会在项目中生成一个dist文件夹，copy dist文件夹里面的文件到服务器上
npm run build

重启nginx

./nginx -s reload

BUG解决

• 解决在路由切换，再刷新时，会出现404报错。原因是Vue项目采用了history路由方式。

  • 解决办法：在nginx配置文件（/usr/local/nginx/conf/nginx.conf）增加：

    location / {
                root   html;
                index  index.html index.htm;
                try_files $uri $uri/ /index.html; # 增加这行
            }