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

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

1. 打包项目，npm run build

   执行npm run build命令后，会生成一个dist文件夹。

   这一步如果得不到预期的结果，可以把vue.config.js文件中的publicPath节点变为’./’，如果不存在，则新建文件

   

2. 把项目文件放到服务器上

   用WinSCP登录服务器后，理论上直接把本地的文件直接拖过去，就能复制过去了。但是ubuntu没有root用户，所以部分文件夹会没有权限。这个时候，就可以采用战略：先复制到不需要权限的地方，然后再通过命令行给命令mv添加sudo增加权限，把文件夹复制到需要文件的地方。

   

   

   

   

3. 安装nginx, sudo apt-get install nginx

   

4. 使用PuTTy配置nginx， 到下图路径中，执行命令sudo vim default

   

   

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

   

5. 重启nginx，sudo nginx -s reload, 打开服务器网址，就能看到效果

6. 还有个小问题，如果路由模式为history的话，可能会有加载不成功的资源(如图片)，本人因为在考试复习周，所以没有去搞这个配置，而是直接把路由模式改为了哈希模式(虽然有#，丑了点)

最终效果：