安装和部署vue项目

最新推荐文章于 2024-07-02 22:05:51 发布
最新推荐文章于 2024-07-02 22:05:51 发布
阅读量124 收藏
点赞数
分类专栏： 服务器 文章标签： vue.js node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42846807/article/details/114397676
版权

Windows下的安装及部署

1、下载nodejs并安装：https://nodejs.org/en/
2、通过cmd窗口进入自己的前端项目
3、输入命令安装相关依赖：npm install

在这里插入图片描述

4、在cmd控制台中输入如下命令：npm run dev

在这里插入图片描述

5、访问地址http://localhost:8091 查看效果：

在这里插入图片描述

Linux下的部署

1、进入项目中使用：npm run build 命令打包vue项目在这里插入图片描述
2、打包后的代码位置

在这里插入图片描述

3、把打包后的代码放到nginx下面就可以了
lx_追风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
服务器部署vue项目
SiShen654的博客
03-01 2573
0- 介绍： 使用的服务器：腾讯云 使用的系统：centos7.6（centos8坑太多） 使用的用户：root 1- 先将vue项目打包 在项目中执行打包命令，执行完成后文件夹中会出现一个 dist 文件夹 npm run build 2- 在Windows上安装nginx 注意是windows版本的，目的在于测试打包的项目是否能够正常显示 （1）将下载的包解压后，进入该文件夹，输入cmd打开命令窗口 （2）将 刚刚打包的dist文件夹中的文件复制到 html 文件夹中。（注：需要先将htm
手把手教你如何把vue项目打包后部署到服务器（小白教程）
Orange71234的博客
06-21 1万+
（5）输入用户名密码登录出现如下页面 ，点击左侧网站-->添加站点-->输入域名-->根目录地址会 自动生成-->点击提交-->站点创建成功。1.vscode打开你的vue项目-- >点终端 -- >输入npm run build 按回车进行打包；3.下载安装好软件后双击打开，选择SSH连接，填写如下信息，最后点击确定。（7）点击上传，按照下图方式上传之前打包好的dist文件夹下的内容，(2)查看服务器是否安装宝塔，如安装则出现宝塔面板命令，(3)输入14，查看并复制外网面板地址以及用户名，密码。
如何快速部署vue项目
最新发布
qq_43558959的博客
07-02 1485
如何快速部署自己的vue项目呢，读完这篇文章你应该可以获得自己想要的答案
Vue安装与配置教程（非常详细）从零基础入门到精通，看完这一篇就够了
热门推荐
Javachichi的博客
09-14 4万+
网络安全行业产业以来，随即新增加了几十个网络安全行业岗位︰网络安全专家、网络安全分析师、安全咨询师、网络安全工程师、安全架构师、安全运维工程师、渗透工程师、信息安全管理员、数据安全工程师、网络安全运营工程师、网络安全应急响应工程师、数据鉴定师、网络安全产品经理、网络安全服务工程师、网络安全培训师、网络安全审计员、威胁情报分析工程师、灾难恢复专业人员、实战攻防专业人员…网上虽然也有很多的学习资源，但基本上都残缺不全的，这是我自己录的网安视频教程，上面路线图的每一个知识点，我都有配套的视频讲解。
Vue环境安装和部署
Jim Zheng
11-12 1239
开发环境安装与部署
Vue前端项目部署的三种方案
qq_44741577的博客
05-27 4458
Nginx(发音为“engine-x”)是一款高性能的 HTTP 服务器和反向代理服务器，同时也是一个IMAP/POP3/SMTP 代理服务器。Nginx最初由 lgor Sysoev 编写，于 2004年发布。反向代理负载均衡静态内容服务HTTP/2 支持SSL/TLS 支持高速缓存。
nginx下部署vue项目的方法步骤
09-29
主要介绍了nginx下部署vue项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
手把手教你实现Docker 部署 vue 项目
09-29
主要介绍了手把手教你实现Docker 部署 vue 项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Docker结合Jenkins部署vue项目
01-20
Docker结合Jenkins部署vue项目 接上篇 Vue项目没什么好说的，在本地一般使用vue ui启动vue管理的前端，然后在里面进行启动 Vue官方说可以不通过ngin来部署，但是如果上生产环境，建议还是要走nginx 安装nginx 这里...
Vue前端项目部署IIS的实现
10-15
在现代Web开发中，Vue.js是一个非常流行的前端框架，用于构建用户界面。然而，为了让非开发人员能够方便地访问和展示基于...希望这个教程对你在部署Vue项目到IIS的过程中有所帮助，记得持续学习和探索更多Web开发技巧。
Vue+Django项目部署详解
10-16
然后，使用`npm run build`命令构建前端Vue项目，并将变动提交到Git仓库。 在服务器上进行配置时，首先确保安装了必要的软件，如Python、pip、virtualenv、nginx、Git、gcc以及uWSGI。对于数据库，这里假设使用...
2023最新最全 Vue 安装与配置入门教程(非常详细)，从零基础入门到精通，看完这一篇就够了！！！
logic1001的博客
11-25 1万+
网络安全行业产业以来，随即新增加了几十个网络安全行业岗位︰网络安全专家、网络安全分析师、安全咨询师、网络安全工程师、安全架构师、安全运维工程师、渗透工程师、信息安全管理员、数据安全工程师、网络安全运营工程师、网络安全应急响应工程师、数据鉴定师、网络安全产品经理、网络安全服务工程师、网络安全培训师、网络安全审计员、威胁情报分析工程师、灾难恢复专业人员、实战攻防专业人员…网上虽然也有很多的学习资源，但基本上都残缺不全的，这是我自己录的网安视频教程，上面路线图的每一个知识点，我都有配套的视频讲解。
vue项目部署到服务器上
web18536560468的博客
09-10 1万+
深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
如何把vue项目部署服务器（宝塔面板）上
weixin_43923808的博客
06-01 1万+
如果输入地址还是打不开，那么可能是以下几个原因。点网站，点击设置，选择网站目录。
【前端部署】前端Vue部署正式环境部署上线流程
后端研发工程师Marion的博客
12-26 2777
将 Vue 项目部署到线上，通常需要经过以下步骤：1. **本地开发和测试：**- 确保您的本地开发环境已经安装了 Node.js 和 npm。- 在命令行中进入您的 Vue 项目目录，并运行以下命令安装项目依赖：```bash```- 完成依赖安装后，可以使用以下命令在本地启动开发服务器进行测试：```bash```- 打开浏览器并访问 `http://localhost:8080`（默认端口号为8080），确保项目能够正常运行，并进行功能测试和调试。
记录下如何部署vue项目——（三）部署Vue项目
huaqianzkh的专栏
10-10 1985
本文介绍在vscode中开发完成的vue项目如何部署到nginx服务器中。
Vue打包项目，并部署到Linux服务器中(详细过程)
qq_45634989的博客
07-24 6809
Vue打包项目，并部署到Linux服务器中(详细过程)
腾讯云部署vue+node项目
qq_53769810的博客
01-30 873
腾讯云部署vue和node
Vue安装及环境配置教程(超详细图文教程)
java骨灰级码农，10年IT从业经验
05-18 2947
将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。到这里，Vue安装及环境配置就已经全部完成，如有不会，欢迎骚扰！先把路径改到刚刚创建的项目，然后再运行，语句如下。输出了版本号就说明Node.js已经安装成功。变量值：你的安装目录\node_modules。可以选择创建Vue2版本或者Vue3版本的项目。（注意中间有个空格）验证是否安装成功。创建vue项目，选择项目想要放的位置。系统变量中新增一个变量，如下👇。一直Next即可完成安装。打开cmd窗口，执行如下命令。安装webpack模板。
ubuntu 安装nginx并部署vue项目
07-27
你可以按照以下步骤在Ubuntu上安装Nginx并部署Vue项目： 1. 更新系统：使用以下命令更新你的Ubuntu系统： ``` sudo apt update sudo apt upgrade ``` 2. 安装Nginx：使用以下命令安装Nginx： ``` sudo apt install nginx ``` 3. 配置Nginx：默认情况下，Nginx将在`/var/www/html`目录下查找网页文件。你可以通过编辑Nginx配置文件进行自定义配置。使用以下命令打开默认配置文件： ``` sudo nano /etc/nginx/sites-available/default ``` 4. 在配置文件中，将`root`指令的值更改为你Vue项目的构建文件所在的路径。例如，如果你的Vue项目构建后的文件位于`/var/www/html/my-vue-project/dist`目录下，你可以将以下行更改为： ``` root /var/www/html/my-vue-project/dist; ``` 5. 保存并关闭文件。然后使用以下命令重启Nginx以应用更改： ``` sudo service nginx restart ``` 6. 部署Vue项目：将你的Vue项目构建为静态文件，并将构建后的文件复制到Nginx指定的目录中。使用以下命令进行构建： ``` cd your-vue-project-directory npm run build ``` 在构建完成后，将构建后的文件复制到Nginx指定的目录中。例如，使用以下命令将构建后的文件复制到`/var/www/html/my-vue-project/dist`目录下： ``` sudo cp -r dist/* /var/www/html/my-vue-project ``` 7. 现在，你的Vue项目已经部署到Nginx上。你可以通过在浏览器中输入服务器的IP地址或域名来访问它。 请注意，上述步骤假定你已经在Ubuntu上安装了Node.js和npm，并且已经在Vue项目中配置了正确的构建设置。如果你还没有安装Node.js和npm，你可以通过以下命令进行安装： ``` sudo apt install nodejs sudo apt install npm ``` 希望对你有帮助！如果你还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值