欢迎来到站圈网!

php远程媒体七牛摇摇node

投稿中心

JavaScript

当前位置: 主页 > Web前端 > JavaScript

vue项目打包后部署到服务器的详细步骤

时间:2022-09-18|作者:调调啊|点击:

耽误了几天, 终于开始写第二篇博客了, 这篇会讲怎么将vue项目打包部署到服务器, 其实和上一篇的uni-app步骤一样的, 就是最后多了一步修改nginx配置, 好 , 上操作

一 ,打包项目

vscode下载链接:

链接: https://pan.baidu.com/s/1PD-Sts-e2V17wSs5FvrLmg

提取码: 2jbf

1 , vscode打开你的vue项目 -- > 点终端- > 新终端- >输入npm run build 按回车 , 显示正在打包..稍等一会

vue项目打包后部署到服务器的详细步骤

2 , 打包成功 , 生成了dist文件夹, 打包好的文件存放在里面

vue项目打包后部署到服务器的详细步骤

二 , 用一个工具, 把打包好的文件上传到你的服务器 , 我用的是Xftp , 用别的工具也可以

下载链接:

链接: https://pan.baidu.com/s/18KLWFCff8rPZHS5Ys0JlBA

提取码: 4chh

vue项目打包后部署到服务器的详细步骤

1.打开Xftp, 点小窗口的新建

vue项目打包后部署到服务器的详细步骤

2 .点完之后弹出这个框, 填写完信息之后点连接 , 服务器的相关信息问公司的人要

vue项目打包后部署到服务器的详细步骤

3.点完连接之后 , 弹出这个框 , 点接受并保存

vue项目打包后部署到服务器的详细步骤

4 .然后会看到右侧出现了新建会话的窗口 , 表示连接到服务器了,

左侧是你自己的电脑本地, 右侧是服务器电脑

左侧进到刚刚打包好的文件存放路径 , 把dist文件夹复制到右侧服务器中部署的文件夹里, 看你们是部署到哪个文件夹就拖到哪里

vue项目打包后部署到服务器的详细步骤

三 , 修改nginx配置,我用的是宝塔面板的方式

宝塔下载链接:

链接: https://pan.baidu.com/s/1nPvtEYL8IV6Egx265i8ofw

提取码: zane

vue项目打包后部署到服务器的详细步骤

1 , 打开宝塔面板, 配置 , 因为宝塔要在本地浏览器中打开, 所以域名就写本地 127.0.0.1 , 保存配置后点打开面板 ,会在浏览器中打开, 点登录 (宝塔安装和配置有不懂的可以搜一下别的博客,有详细介绍)

vue项目打包后部署到服务器的详细步骤

vue项目打包后部署到服务器的详细步骤

2 , 登录之后是这样的, 点左边的软件管理

vue项目打包后部署到服务器的详细步骤

3 , 顶部的应用搜索 nginx , 找到之后点右边的安装

vue项目打包后部署到服务器的详细步骤

4 , 安装完后在第二页 , 点右边的设置

vue项目打包后部署到服务器的详细步骤

5 , 弹出一个框 , 点左边的配置修改 ,滚动条拉到下面,按下图标的修改后点保存

vue项目打包后部署到服务器的详细步骤

6 , 保存完之后点左边的服务 , 点重启

vue项目打包后部署到服务器的详细步骤

7 , 部署成功!! 打开浏览器,输入服务器ip地址,访问一首页的内容吧 ^_^

地址就是服务器ip/部署的文件夹/index.html#/ , 比如服务器ip是123.60.120.40:3006,部署的文件夹名字是app, 地址就是如下 (瞎写的)

http://123.60.120.40:3006/app/index.html

到此这篇关于vue项目打包后部署到服务器的文章就介绍到这了,更多相关vue打包部署服务器内容请搜索站圈网以前的文章或继续浏览下面的相关文章希望大家以后多多支持站圈网!

版权声明:本文内容由小编收集网络,均来自网络用户自发贡献,版权归原作者所有,Web前端、电脑编程学习类网站不拥有其著作权,亦不承担相应法律责任。具体规则请查看《Web前端、电脑编程学习类网站用户服务协议》和《Web前端、电脑编程学习类网站知识产权保护指引》。如果您发现本站中有涉嫌抄袭的内容,填写联系本站管理员,一经查实,管理员将立刻删除涉嫌侵权内容。

上一篇:solid.js响应式createSignal 源

下一篇:Vue实现简单基础的图片裁剪功能

本文标题:vue项目打包后部署到服务器的详细步骤

本文地址:https://www.zhano.cn/JavaScript/67458.html

AD300

广告投放 | 联系我们 | 版权申明 | SiteMap

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:15234109 | 邮箱:15234109#qq.com(#换成@)

Copyright © 2019-2022 豫ICP备19001789号