vue项目打包后部署到服务器(超详细步骤)
耽误了几天, 终于开始写第二篇博客了, 这篇会讲怎么将vue项目打包部署到服务器, 其实和上一篇的uni-app步骤一样的, 就是最后多了一步修改nginx配置, 好 , 上操作
一 ,打包项目
vscode下载链接:https://pan.baidu.com/s/1ibHt7XB6EZy37BDb1CigWw
提取码:69r1
1 , vscode打开你的vue项目 -- > 点终端 - > 新终端 - >输入npm run build 按回车 , 显示正在打包..稍等一会
2 , 打包成功 , 生成了dist文件夹, 打包好的文件存放在里面
二 , 用一个工具, 把打包好的文件上传到你的服务器 , 我用的是Xftp , 用别的工具也可以
下载链接:https://pan.baidu.com/s/1Y5IGzKwh9OaJGq7KFFpukg
提取码:ktup
1, 打开Xftp , 点小窗口的新建
2 , 点完之后弹出这个框, 填写完信息之后点连接 , 服务器的相关信息问公司的人要
3 , 点完连接之后 , 弹出这个框 , 点接受并保存
4 , 然后会看到右侧出现了新建会话的窗口 , 表示连接到服务器了,
左侧是你自己的电脑本地 , 右侧是服务器电脑
左侧进到刚刚打包好的文件存放路径 , 把dist文件夹复制到右侧服务器中部署的文件夹里 , 看你们是部署到哪个文件夹就拖到哪里
三 , 修改nginx配置,我用的是宝塔面板的方式
宝塔下载链接:https://pan.baidu.com/s/1o5kpbDyvUTPNzOsDQkFc_Q
提取码:4qgo
1 , 打开宝塔面板, 配置 , 因为宝塔要在本地浏览器中打开, 所以域名就写本地 127.0.0.1 , 保存配置后点打开面板 ,会在浏览器中打开, 点登录 (宝塔安装和配置有不懂的可以搜一下别的博客,有详细介绍)
2 , 登录之后是这样的, 点左边的软件管理
3 , 顶部的应用搜索 nginx , 找到之后点右边的安装
4 , 安装完后在第二页 , 点右边的设置
5 , 弹出一个框 , 点左边的配置修改 ,滚动条拉到下面,按下图标的修改后点保存
6 , 保存完之后点左边的服务 , 点重启
7 , 部署成功 !! 打开浏览器,输入服务器ip地址,访问一首页的内容吧 ^_^
地址就是 服务器ip/部署的文件夹/index.html#/ , 比如 服务器ip是123.60.120.40:3006 ,部署的文件夹名字是app , 地址就是如下 (瞎写的)
http://123.60.120.40:3006/app/index.html#/
vue项目打包后部署到服务器(超详细步骤)相关推荐
- 超简单的React项目打包后部署到服务器上
前言:我们都知道有些react项目路由采用的是BrowserRouter跟vue的history模式一样,打包后生成的不管是dist,还是build的文件,直接打开都无法直接浏览到项目,然后查看控制器 ...
- uni-app项目打包成H5部署到服务器(超详细步骤)
咳咳, 第一次写博客, 有点激动, 昨天get了一个新技能, 也是我之前一直最不懂的一块, 就是项目做完后如何部署到服务器,昨天尝试了部署uni-app项目到测试服务器, 成功之后很开心, 后面又自己 ...
- vue项目打包后生成一个配置文件可以修改打包后的服务器api地址
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址 问题描述:vue项目打包上线之后,如果要改服务器api地址,只能在源码更改然后重新打包发布,为了解决这个问题,我们可以在static增 ...
- 打包后index.html路径错误,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题 2018年05月23日 10:05:35 for_weber 阅读数:14179 Vue项目运行npm run buil ...
- Vue项目打包后不能正常显示页面
项目场景: 通过 Vue CLI 创建的 vue 项目,编写完项目后,通过 npm run bulid 对项目进行打包,再把打包得到的内容(dist文件夹)交给后端部署到服务器上. 问题描述: 对 v ...
- Vue项目打包后js文件压缩
前言 这段时间因为免费试用了https://free.aliyun.com/一台阿里云的服务器,配置是 2核4G 2M, 因为带宽太低了,每次在第一次加载的时候太慢了,通过F12调试,发现主要是因为加 ...
- 关于vue项目打包后提示图片文件路径错误的解决方法
vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片 ...
- php项目index页面空白,如何解决vue项目打包后打开页面空白的问题
这篇文章主要介绍了vue项目打包后打开空白解决办法,内容挺不错的,现在分享给大家,也给大家做个参考. 网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通 ...
- vue 项目打包后 浏览器 F12 在source 下不显示 webpack 包
vue 项目打包后 浏览器 F12 在source 下不显示 webpack 包,度娘上好多说的是 在 vue.config.js 配置 productionSourceMap: false 即可,然 ...
最新文章
- 【kAriOJ】离散数学春季学期编程测试 1
- java 异常 最佳实践_关于JAVA异常处理的20个最佳实践
- Python-学生信息管理系统.exe(代码)
- sqlyong导出sql没有数据_sqlyog怎么导入外部数据库-sqlyog导入数据库的方法 - 河东软件园...
- 操作系统实验--存储管理
- 用网络附加存储(NAS)构建(本地及远程)、数据容灾
- Flume学习应用:Java写日志数据到MongoDB
- 重读《从菜鸟到测试架构师》--构建测试
- java新增mysql时 中文出现_Java项目往数据库中插入数据,出现中文乱码
- 利用AWVS进行反制
- CAD立体图做法详细步骤
- 天刀手游不显示服务器列表,天涯明月刀手游服务器bug解决方法
- Python学习——语法错误与异常
- RK987蓝牙键盘使用说明书分享
- 柴俊理金:临近公投市场屏息,黄金沥青谨慎而行
- 微信小程序登录 获取头像不显示
- Windows 和 android 平台Boost编译方法
- 中国农场可变利率技术(VRT)行业市场供需与战略研究报告
- docker安装speedtest
- HMS Core 6.8.0版本发布公告
热门文章
- 华为2288H-V5服务器做raid的详细步骤
- RMI和Spring整合_晏无心_新浪博客
- phpcms_v9 默认templates模板文件目录结构
- 每天坚持做一件有意义的事
- Linux command lvextend 扩展逻辑卷设备
- 迷宫的非递归求解 C语言 数据结构课程设计
- 【论文笔记 fintune 】羊驼
- gpg: keyserver receive failed: Server indicated a failure
- 学计算机的女生,是一种怎样的存在?笑喷~
- 全球及中国奢侈品营销服务行业发展趋势及投资前景预测报告2022-2028年