Nuxt.js 速成(含使用宝塔实现nuxt项目部署)

简介: Nuxt.js 速成(含使用宝塔实现nuxt项目部署)

创建项目

npx create-nuxt-app 项目名称

根据需要选择配置和依赖

创建成功后

启动项目

进入项目目录

cd 项目名称

启动项目

npm run dev

浏览器访问 http://localhost:3000/

部署项目

1. 云服务器上安装PM2管理器

若未安装宝塔,参考链接安装  https://blog.csdn.net/weixin_41192489/article/details/109668849

登录宝塔管理面板,在软件商店中搜索安装(安装好后,系统里便有了node.js  npm nvm 和 pm2)

2. 防火墙放行3000端口

宝塔中在安全菜单中,防火墙放行3000端口(nuxt项目启动后,使用的3000端口)

3. 在项目的package.json中添加端口配置

位置与scripts同级

  "config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": 3000
    }
  },

4. 打包项目

npm run build

5. 上传项目包到服务器

在云服务器中,以项目名称新建文件夹,如itdic,将 .nuxtstaticnuxt.config.jspackage.jsonpackage-lock.json上传到该文件夹中

.nuxt 是隐藏文件,在xftp界面不显示

6. 安装依赖

登录远程服务器命令行,进入项目包的目录

cd /home/itdic

安装依赖

npm i

7. 启动项目

打开PM2管理器的设置

在项目列表中添加项目

保存后,项目会自动启动。

访问 http://106.12.123.173:3000/ 【云服务的外网IP:3000】页面正常显示,即部署成功。

目录
相关文章
|
前端开发 NoSQL 数据库
egg.js项目部署上线服务器
egg.js项目部署上线服务器
640 0
egg.js项目部署上线服务器
|
1月前
|
SQL 前端开发 JavaScript
Nest.js 实战 (十五):前后端分离项目部署的最佳实践
这篇文章介绍了如何使用现代前端框架Vue3和后端Node.js框架Nest.js实现的前后端分离架构的应用,并将其部署到生产环境。文章涵盖了准备阶段,包括云服务器的设置、1Panel面板的安装、数据库的安装、域名的实名认证和备案、SSL证书的申请。在部署Node服务环节,包括了Node.js环境的创建、数据库的配置、用户名和密码的设置、网站信息的填写、静态网站的部署、反向代理的配置以及可能遇到的常见问题。最后,作者总结了部署经验,并希望对读者有所帮助。
128 11
|
3月前
|
C# 开发者 测试技术
震惊!Xamarin 竟能如此构建跨平台应用程序,代码共享、界面设计与性能优化全攻略大揭秘!
【8月更文挑战第31天】在移动应用开发领域,跨平台工具日益受到青睐。Xamarin 是一款强大的工具,支持使用 C# 开发适用于 iOS、Android 和 Windows 的应用。通过安装 Visual Studio 或 Visual Studio for Mac,并创建 Xamarin 项目,开发者可以利用丰富的功能和工具进行开发。Xamarin 的主要优势在于代码共享,能够显著提高开发效率。
69 0
|
3月前
|
JavaScript 前端开发 应用服务中间件
Vue.js项目部署与优化:一场从本地到生产环境的华丽蜕变,见证你的应用如何凤凰涅槃,惊艳上线!
【8月更文挑战第30天】作为一名前端开发者,掌握从本地开发环境到生产环境的迁移至关重要。本文将带你了解如何使用 Vue.js 构建和打包应用,确保其在生产环境中流畅运行。首先,通过 `npm run build` 或 `yarn build` 命令生成生产环境文件;接着,配置服务器(如 Nginx)以支持静态文件服务;最后,通过代码分割、资源压缩、CDN 使用、服务端渲染及缓存策略等手段优化应用性能。跟随本文,你将学会如何让 Vue.js 应用在真实环境中表现优异,为用户提供流畅体验。
52 0
|
5月前
|
弹性计算 监控 JavaScript
云服务器 ECS产品使用问题之Node.js项目部署成功后无法通过公网IP+端口号访问,是什么导致的
云服务器ECS(Elastic Compute Service)是各大云服务商阿里云提供的一种基础云计算服务,它允许用户租用云端计算资源来部署和运行各种应用程序。以下是一个关于如何使用ECS产品的综合指南。
|
Web App开发 缓存 JavaScript
六千字梳理 Node.js 的多进程模型和项目部署流程
本文介绍了 Node.js 中的多进程模型,以及如何将一个基于 Node.js 开发的 Web 应用,部署到服务器上,并且使用 PM2 工具进行管理,最终通过 Nginx 进行代理转发,对外提供服务。
603 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
95 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
122 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
81 4