您现在的位置是:首页 > Javascript
当前栏目
Vue项目部署到服务器(ubuntu)
2023-02-19 12:20:11 时间
Vue 项目部署到服务器(ubuntu)
工具:WinSCP、PuTTy(可能不是专业的工具,是本人上操作系统的课用到的软件,直接用来部署了)
- 打包项目,
npm run build
执行npm run build
命令后,会生成一个 dist 文件夹。 这一步如果得不到预期的结果,可以把vue.config.js
文件中的 publicPath 节点变为’./‘,如果不存在,则新建文件
- 把项目文件放到服务器上 用 WinSCP 登录服务器后,理论上直接把本地的文件直接拖过去,就能复制过去了。但是 ubuntu 没有 root 用户,所以部分文件夹会没有权限。这个时候,就可以采用战略:先复制到不需要权限的地方,然后再通过命令行给命令 mv 添加 sudo 增加权限,把文件夹复制到需要文件的地方。
- 安装 nginx,
sudo apt-get install nginx
- 使用 PuTTy 配置 nginx, 到下图路径中,执行命令
sudo vim default
这里直接在 WinSCP 中执行会出错,可能是因为 WinSCP 原本就只是用来管理传输文件的
- 重启 nginx,
sudo nginx -s reload
, 打开服务器网址,就能看到效果 - 还有个小问题,如果路由模式为 history 的话,可能会有加载不成功的资源(如图片),本人因为在考试复习周,所以没有去搞这个配置,而是直接把路由模式改为了哈希模式(虽然有#,丑了点)
最终效果:
相关文章
- 使用GraphQL时需权衡考虑的问题
- Nacos 中的配置文件如何实现加密传输
- 如何在 TypeScript 中使用命名空间
- 发布了一个jar包到中央仓库,我的心好累…
- 面试题:三个线程按顺序打印 ABCABC
- 低代码海报平台的编辑器难点剖析
- Go1.20 中两个关于 Time 的更新,终于不用背 2006-01-02 15:04:05 了!
- 聊聊如何防止接口重复提交?
- Nuxt.js 3.0 正式发布!为每个人提供了一个愉快的 Vue 全栈开发体验
- 原来count(*)是接口性能差的真凶
- 实战:画了几张图,终于把OAuth2搞清楚了
- 前端性能优化心法
- 基于Sentry高效治理前端异常
- Go 程序里 if else 分支太多?试着用策略模式治理一下吧!
- Node.js 是怎么找到模块的?你知道吗?
- 记一次“雪花算法”造成的生产事故的排查记录
- 两万字盘点那些被玩烂了的设计模式
- 如何在React导航栏实现搜索功能
- 使用GitHub Actions实现自动化部署
- PyTorch常用五个抽样函数