一、上线前准备工作

1. 首先在vue.config中配置反向代理解决跨域问题

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      "/api": {
        target: "后端url地址",
        //允许跨域请求
        changeOrigin: true
      }
    }
  }
})

2. 在vue项目中 运行npm run build进行项目打包

二、开始上线

1. 连接云端服务区 在 /usr/local/ 下创建 web文件夹 用来存放dist文件夹

2. 安装依赖

3. cd nginx

4. 下载tar包

5. ar -xvf nginx-1.13.7.tar.gz

cd /usr/local/nginx
//进入目录
cd nginx-1.13.7
//执行命令 考虑到后续安装ssl证书 添加两个模块
./configure --with-http_stub_status_module --with-http_ssl_module
//执行make命令
make
//执行make install命令
make install

6. cd ../ 退到nginx目录下

7. cd sbin 进入sbin

8. ./nginx

9.通过xftp 把dist目录下的文件直接拖拽到 nginx 下的html文件夹下，覆盖原文件即可，刷新页面即可。

三. 一些命令

npm run build     打包我们的项目
rm -rf tanwei.txt 强制删除 谨慎使用
rm -rf *          删除当前文件夹下的所有
cd ../ ###        后退到###目录下
cd ###            进入###