zl程序教程

您现在的位置是:首页 >  Javascript

当前栏目

Vue项目部署到服务器(ubuntu)

2023-02-19 12:20:11 时间

Vue 项目部署到服务器(ubuntu)

工具:WinSCP、PuTTy(可能不是专业的工具,是本人上操作系统的课用到的软件,直接用来部署了)

  1. 打包项目, npm run build 执行 npm run build命令后,会生成一个 dist 文件夹。 这一步如果得不到预期的结果,可以把 vue.config.js文件中的 publicPath 节点变为’./‘,如果不存在,则新建文件
  1. 把项目文件放到服务器上 用 WinSCP 登录服务器后,理论上直接把本地的文件直接拖过去,就能复制过去了。但是 ubuntu 没有 root 用户,所以部分文件夹会没有权限。这个时候,就可以采用战略:先复制到不需要权限的地方,然后再通过命令行给命令 mv 添加 sudo 增加权限,把文件夹复制到需要文件的地方。
  1. 安装 nginx, sudo apt-get install nginx
  1. 使用 PuTTy 配置 nginx, 到下图路径中,执行命令 sudo vim default

这里直接在 WinSCP 中执行会出错,可能是因为 WinSCP 原本就只是用来管理传输文件的

  1. 重启 nginx, sudo nginx -s reload, 打开服务器网址,就能看到效果
  2. 还有个小问题,如果路由模式为 history 的话,可能会有加载不成功的资源(如图片),本人因为在考试复习周,所以没有去搞这个配置,而是直接把路由模式改为了哈希模式(虽然有#,丑了点)

最终效果