Vue项目部署到服务器(ubuntu)
2023-06-13 09:16:27 时间
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 的话,可能会有加载不成功的资源(如图片),本人因为在考试复习周,所以没有去搞这个配置,而是直接把路由模式改为了哈希模式(虽然有#,丑了点)
最终效果:
相关文章
- MongoVUE_Vue.js+Flask+MongoDB
- Vue专题 05_详解vue生命周期的每个节点
- Vue响应式原理基本理解实现[通俗易懂]
- vue报错: ERROR TypeError: Cannot read property 'version' of undefined
- VUE 项目本地没有问题,部署到服务器上提示错误
- Vue(3)webstorm代码格式规范设置与vue模板配置
- Vue笔记(5)
- html使用vue axios,使用 Vue和axios
- vue中怎么解决跨域问题_vue本地访问服务器跨域
- Vue刷新当前页面(成功)
- VUE组件封装_vue使用组件
- Vue生成二维码_vue视频软件怎么生成二维码
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- Vue(renren-fast_vue_master)项目目录结构[通俗易懂]
- 今天讲vue讲解专栏里的VUE组件
- IntelliJ IDEA使用 vue-cli 创建Vue项目
- vue源码分析-从new Vue开始_2023-02-24
- 前端Vue框架面试题大全
- 安装Vue on Linux:轻松搭建开发环境(linux安装vue)
- Vue极致集成Redis,实现更优秀的性能(vue集成redis)
- Vue框架搭建在Redis之上的Web应用(vue请求redis)
- 优雅的Vue请求Redis驱动的高性能服务(vue请求redis)
- Vue实现Redis订阅消息的实现方案(vue 订阅redis)
- Vue调用Redis体验更好的开发效率(vue能调redis吗)
- Vue结合Redis实现性能优化(vue引入redis)
- 从零开始Vue项目中使用Redis(vue使用redis)
- Vue中触发Redis订阅通知(vue中订阅redis)