Nuxtjs项目部署

原创 已于 2024-05-27 02:41:55 修改 · 3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Nux.tjs #Nodejs #Nginx #Vue.js

于 2019-08-03 02:14:00 首次发布

题外话

首先说一点题外话，之前大概5月份的时候我做过一次简单的项目部署。但是过了两个多月我忘完了，一点关于此的记忆都没有了。Google了大半天，结果都是关于直接部署到服务器的，很少有讲到部署到CDN的，虽然官方也说明了，但是在没弄好之前我实在是不理解官方的那种简单的说明。

服务端环境

node.js安装

下载

首先服务器先安装node,我是直接去官网下载Linux版的安装包，然后再FTP到我的服务器。

解压

tar -xvf 你的文件名

然后进入解压目录下面的bin目录，不出意外，会有三个文件，分别是： node, npm， npx。然后分别创建软连接（命令这里只列举node）

ln nodejs解压后的目录/bin/node /usr/local/bin

执行完过后，可以通过下列命令检查

node -v

npm也按上诉步骤执行

安装cnpm和注册淘宝镜像

这类似本地配置一样

npm install cnpm -g  --registry=https://registry.npm.taobao.org

安装pm2

为了方便管理node项目，所以选择安装这个工具，似乎也可以通过其他方式管理，后序再去了解了。

nginx安装

至此，服务器端的环境就搭建好了

nuxtjs项目打包

执行npm run build
然后在服务器上创建一个文件夹，名字随意，不过一般就叫项目名
然后上传本地打包后的：
.nxutjs
server
static
nuxt.config.js
package.json
这几个文件夹到新建的那个目录
然后运行：(注意命令中的空格)

pm2 start npm --name "随意取一个名字" -- run start

可以参看一下常用的pm2命令

Nuxt - 项目打包部署及上线到服务器流程（SSR 服务端渲染）
资深程序员
07-25 1万+
Nuxt-项目打包部署及上线到服务器流程，详细介绍Nuxt项目上线部署，服务端渲染(ssr)项目及nuxt项目部署过程，nuxt项目打包上线，Nuxt项目的部署教程，NuxtJS项目部署方案，Nuxt如何部署到线上，nuxt项目部署篇，Nuxt项目搭建到Nuxt项目部署，Nuxt项目从开始到部署，详细教程。服务器部署nuxt项目,nuxt服务端部署上线，在服务器上部署nuxt项目，NuxtJS项目——命令和部署。......
nuxtjs 项目自动部署
gongye2019的博客
06-01 558
介绍：最简单的部署方式 发布部署步骤： 1、配置 Host + Port 2、压缩发布包 3、解压 4、安装依赖 5、启动服务 一、手动部署项目 第一次连接服务器并发布项目 1、配置 Host + Port // nuxt.config.js 中 server: { host: '0.0.0.0', // 监听所有地址 port: 3000 }, 2、压缩发布包（.nuxt文件夹，static文件夹，nuxt.config.js，package.json，package-lock.json） 这里根据
详解Nuxt.js部署及踩过的坑
10-18
主要介绍了详解Nuxt.js部署及踩过的坑，Nuxt.js 提供了两种发布部署应用的方式：服务端渲染应用部署 和 静态应用部署。本文主要说说服务端渲染应用部署，感兴趣的小伙伴们可以参考一下
nuxt.js项目部署
拥抱城市的你
08-28 846
搭建nuxtjs项目 $ npx create-nuxt-app <项目名> 或 $ yarn create nuxt-app <项目名> 修改本地开发主机名 和 端口号 需要配合 switchHost公工具 第一步 第二步 npm run build 本地打包 打包之后我们通过xftp连接测试环境服务器 传入文件 ...
Nuxt.js发布部署
weixin_43132396的博客
12-30 1623
使用命令打包 https://zh.nuxtjs.org/guide/commands 配置命令，package.json中添加如下内容、 令 描述 nuxt 启动一个热加载的web服务器（开发模式） nuxt build 利用 webpack 编译应用，压缩 JS 和 CSS 资源（发布用）。 nuxt start 以生产模式启动一个 Web 服务器 (需要先执行nuxt build)。 nuxt generate 编译应用，并依据路由配置生成对应的 HTML 文件 (用于
nuxt.js发布部署
sxm666666的博客
11-20 4786
nuxt.js提供三种部署方式，服务端渲染部署，静态应用部署，单页面应用部署。 部署前远程服务器需要安装node，pm2，nginx 服务端渲染部署 nuxt.config.js 配置 target: 'server', // 服务端渲染需要将target设置为server 默认是server 首先执行build打包 npm run build 将".nuxt(隐藏项目)，static，nuxt.config.js, package.json"这四个文件放在服务器中 np
NuxtJS服务端部署过程。
热门推荐
CodingNoob
03-27 1万+
第一步：安装node 参考：nodejs安装过程 第二步：打包项目文件参考：nuxt服务端渲染 第三步：修改配置文件 第四步：开启PM2进程守护，如果不开启那么关闭连接服务器之后npm start进程就关闭了，就无法访问 五、运行结果如下： ...
NUXT3 项目部署宝塔
FitnessSnail的博客
03-14 2106
【代码】NUXT3 项目部署宝塔。
3-3-nuxt.js实现 realworld-nuxtjs项目，同时学习部署在自己服务器上
cloveryuan的博客
09-21 1853
=》测试 -bui9bi NuxtJS 代码仓库地址：https://gitee.com/cloveryuan/realworld-nuxtjs 一、Nuxt.js是什么 一个基于Vue.js生态的第三方开源服务端渲染应用框架 它可以帮我们轻松的使用Vue.js技术栈构建同构应用 官网：https://zh.nuxtjs.org/ Github仓库：https://github.com/nuxt/nuxt.js 二、Nuxt.js的使用方式 初始化项目 已有的Node.js服务端项目 直接把N
nuxt.js项目部署到阿里云服务器
qq_42985642的博客
11-22 1091
nuxt.js项目部署到阿里云服务器 1 配置文件 在package.json文件中加上 "config": { "nuxt": { "host": "0.0.0.0", "port": "3000" } } 2 项目打包 在本地使用命令打包 npm run build 3 上传文件 将.nuxt plugins static nuxt.config.js package.json package-lock.json这几个文件压缩之后传到服务器上 使用xsh
一文搞定nuxt.js搭建到部署（ssr和静态部署）
weixin_45636198的博客
03-04 1万+
uxt 是一个更高级别的 Node.js web 开发框架，用于创建 Vue 应用，可在两种不同模式下开发和部署：通用（SSR）或单页应用（SPA）。此外，您可以在 Nuxt 中将 SSR 和 SPA 部署为静态生成的应用。即使您可以选择 SPA 模式，Nuxt 的全部功能仍在于其通用模式或用于构建通用应用的服务器端渲染（SSR）。通用应用用于描述可以在客户端和服务器端执行的 JavaScript 代码。SSR是服务端渲染：在后台将vue实例渲染为HTML字符串直接返回，在前端激活为交互程序。
【服务端渲染】手动部署 NuxtJs 项目
zimeng303的博客
01-14 1567
Nuxt.js 发布部署 打包 Nuxt.js 提供了一系列常用的命令, 用于开发或发布部署。 命令 描述 nuxt 启动一个热加载的 Web 服务器（开发模式）localhost:3000 nuxt build 利用 webpack 编译应用，压缩 JS 和 CSS 资源（发布用）。 nuxt start 以生产模式启动一个 Web 服务器 (需要先执行 nuxt build)。 nuxt generate 编译应用，并依据路由配置生成对应的HTML文件 (用于静态站点的部署)
宝塔面板部署 Nuxt.js 项目完整教程（SSR/SSG模式）
liuyuanshuaia的博客
02-17 1786
通过以上步骤即可完成Nuxt项目在宝塔面板的部署，如有其他问题欢迎留言讨论！：确保服务器开放 80/443 端口（HTTP/HTTPS）在宝塔「SSL」菜单申请Let's Encrypt证书。：至少 1核 2G 内存（SSR模式需要更高配置）（建议通过「软件商店-Node版本」安装）通过宝塔「文件」功能上传到服务器目录（如。查看页面源代码确认服务端渲染（SSR模式）通过宝塔创建新站点（需提前解析域名）修改Nginx配置自动跳转HTTPS。开启Nginx Gzip压缩。使用CDN加速静态资源。
nuxt.js 从 ＜入门＞ 到 ＜开发＞ 到 ＜部署＞
qq_39025670的博客
01-29 658
1.创建nuxt项目 https://www.cnblogs.com/bien94/p/12572527.html 2.nuxt项目部署 https://www.cnblogs.com/plBlog/p/11428131.html
Vue项目自动部署之二、NuxtJS 发布部署（PM2、GitHub Actions）
皮蛋很白的博客
10-30 1383
传统部署方式 传统部署流程 配置 Host + Port 压缩发布包 把发布包传到服务端 Linux 上的 scp 命令 解压 安装依赖 生产环境启动服务 配置 Host + Port nuxt.config.js中的server属性 host 默认 localhost 只能本地访问 对外访问需设置为 0.0.0.0 会监听所有网卡地址 port - Nuxt 默认 3000 压缩发布包 需要传到服务器上的文件包括： .nuxt static nuxt.co
nuxtjs服务端部署流程
weixin_34417200的博客
03-19 1913
最近做了一个公司的官网项目，需要做服务端部署，延续了之前用的nuxt框架，但是又需要调用接口，所以不能像之前那样通过 npm generate 复制代码生成静态文件来部署，搞了半天才搞好，废话不多说，下面看流程。 #前提：服务器是linux系统。 #准备：需要在服务器上安装 node，pm2，做法请自己百度。 一 打包本地文件 通过 npm run build 复制代码来打包项目，会生成一系列...
vue服务端渲染：nuxtjs打包与部署
qq_36413371的博客
06-05 5371
nuxtjs
Vue.js 服务端渲染（SSR）与 Nuxt.js之部署和优化 Nuxt.js 应用
最新发布
轻口味的专栏
04-19 1699
通过合理地使用 Vue.js 服务端渲染（SSR）和 Nuxt.js，结合高效的部署和优化策略，可以显著提升应用的性能和用户体验。在实际开发中，应根据具体的应用场景和需求，灵活地应用这些技术。
nuxt引入js_Nuxt 自动化部署及打包后文件自动上传七牛云CDN
weixin_34255327的博客
01-09 1019
1.安装七牛云2.在项目根目录新建 upload.js3.上传凭证4.上传配置，详情参考七牛云文档5.在 package.js中修改项目build完成执行upload文件命令7. nuxt.config.js设置CDN路径，详情参考 Nuxt文档8. upload.js 完整代码const qiniu = require("qiniu"); const fs = require("fs"); co...
nuxtjs打包部署
02-15
### Nuxt.js 打包部署教程最佳实践 #### 配置 `nuxt.config.js` 文件 为了组织 Nuxt.js 应用的个性化配置并覆盖默认设置，在项目的根目录下编辑或创建 `nuxt.config.js` 文件。此文件允许自定义应用的行为，如路由模式、加载进度条样式等[^1]。 ```javascript export default { // 全局页面头部信息 head: { title: &#39;My App&#39;, meta: [ { charset: &#39;utf-8&#39; }, { name: &#39;viewport&#39;, content: &#39;width=device-width, initial-scale=1&#39; } ], link: [{ rel: &#39;icon&#39;, type: &#39;image/x-icon&#39;, href: &#39;/favicon.ico&#39; }] }, // 路由模式 (hash 或 history) router: { mode: &#39;history&#39; }, // 加载进度条颜色 loading: { color: &#39;#3B8070&#39; } // 更多选项... } ``` #### 修改 `package.json` 中的服务端监听参数 为了让应用程序能够被外部网络访问，在 `package.json` 的 `config` 字段内指定主机地址为 `0.0.0.0` 和端口号为 `3000`，这使得服务可以在所有可用接口上运行，并通过该端口接收请求[^3]。 ```json { "name": "my-nuxt-app", "version": "1.0.0", "private": true, "scripts": {}, "dependencies": {}, "devDependencies": {}, "config": { "nuxt": { "host": "0.0.0.0", "port": "3000" } } } ``` #### 构建生产环境下的静态资源 完成上述配置之后，执行构建命令以生成适合生产的优化后的前端资产： ```bash npm run build && npm start ``` 对于 SSR（服务器端渲染）的应用程序来说，还需要额外启动 Node.js 服务来处理 HTTP 请求；而对于纯静态站点，则可以直接上传至任何支持 HTML/CSS/JS 文件托管的服务提供商处[^4]。 #### 使用 Web Server 进行反向代理 当采用像 NGINX 这样的 web server 来作为反向代理时，可以将来自客户端浏览器发出的目标 URL 映射到本地正在运行的 Nuxt.js 实例所在的 IP 地址与端口组合之上，从而实现透明转发功能[^5]。 NGINX 配置示例如下所示： ```nginx server { listen 80; server_name example.com; location / { proxy_pass http://localhost:3000/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } } ```
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值