Nuxt打包部署在本地环境运行

已于 2023-04-11 09:06:16 修改
阅读量1.3k 收藏 1
点赞数 1
文章标签： vue.js 前端 javascript
于 2023-04-11 03:53:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45966674/article/details/130073677
版权
首先执行npmrunbuild打包项目，然后在nuxt项目的nuxt.config.js配置文件中设定默认使用80端口。将项目内容移动到新文件夹，安装所需依赖(npmi)，接着运行npmrunstart启动项目。最后，通过浏览器访问启动的链接，一切顺利。
摘要由CSDN通过智能技术生成

先在项目终端执行

npm run build

打一下包
在这里插入图片描述

然后创建一个文件夹
在这里插入图片描述
然后 来到nuxt项目下的nuxt.config.js 指定一下它占用的端口
在这里插入图片描述
这里 我指定他默认占用80端口
然后将项目中这些东西 拉到新文件夹下
在这里插入图片描述
然后 终端访问这个新目录

npm i

在这里插入图片描述
依赖装好之后 在终端执行 npm run start启动
在这里插入图片描述
然后 我们复制这个链接 用浏览器访问
在这里插入图片描述
也是非常的顺利
在这里插入图片描述

瑞晟技术服务中心-耿瑞
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Nuxt - 项目打包部署及上线到服务器流程（SSR 服务端渲染）
王佳斌
07-25 9521
Nuxt - 项目打包部署及上线到服务器流程，详细介绍Nuxt项目上线部署，服务端渲染(ssr)项目及nuxt项目部署过程，nuxt项目打包上线，Nuxt项目的部署教程，NuxtJS项目部署方案，Nuxt 如何部署到线上，nuxt项目部署篇，Nuxt项目搭建到Nuxt项目部署，Nuxt项目从开始到部署，详细教程。服务器部署nuxt项目,nuxt服务端部署上线，在服务器上部署nuxt项目，NuxtJS项目——命令和部署。......
Nuxt3从零开始配置与打包发布
持续学习中
03-31 4609
Nuxt3是基于Vue3的一个开发框架，基于服务器端渲染SSR，可以更加方便的用于Vue的SEO优化。 Nuxt 3.0 新特性包括： 更轻量：以现代浏览器为目标的服务器部署和客户端产物最多可缩小 75 倍 更快：基于 nitro 提供动态代码分割能力，以优化冷启动性能 Hybrid：增量静态生成和其他的高级功能现在都成为可能 Suspense：在任意组件和导航前后都可以获取数据 Composition API：使用 Composition API 和 Nuxt 3 的 composable
完整的 nuxt3 + vue + ts 服务端渲染项目搭建教程，克隆就能用，新手必学，建议收藏
qq_17335549的博客
12-21 4184
在我的 《前端工程化系统教程》用了3篇文章，来详细讲解vite + ts +vue3 项目的搭建流程，本篇文章的内容是，搭建服务端渲染的 Nuxt3 项目。有很多内容和在 vite 项目中有重叠，所以可能不够详细，大家可以参考之前的文章。vite 是打包工具，nuxt3 也是基于 vite的一个框架，所以二者大同小异。项目的完整的流程图如下整篇文章结束，一个完整的 nuxt3 + vue + ts 项目搭建完成，已经可以正常使用了。
nuxt 项目打包到 docker 运行
最新发布
Vinca@的博客
05-16 1143
a.如何在nuxt根目录创建Dockerfile文件，打包时自动复制到构建目录.output b.构建新镜像(镜像名不能大写) c.安全组端口放行
vue服务端渲染：nuxtjs打包与部署
qq_36413371的博客
06-05 5024
nuxtjs
nuxt项目打包部署
weixin_42178050的博客
12-22 1879
http://blog.he29.com/wblog/?p=1392
Nuxt项目分环境打包
lucky_oak的博客
05-25 1436
1.安装cross-env npm install --save-dev cross-env 2.根目录新建env.js module.exports={ dev:{ MODE:'devlopment', ENV_API:'http://xxx/', OTHER_URL:"xxx" }, test:{ MODE:'test', ENV_API:'http://xxx', OTHER_URL:"xxx" }, pro:{ MODE:'
nuxt配置通过指定IP和端口访问的实现
11-26
在开发和部署Web应用时，有时我们需要自定义服务器的监听IP和端口，以便于调试、测试或特定环境的需求。Nuxt.js，一个基于Vue.js的服务器渲染框架，提供了这样的配置选项。本篇文章将详细解释如何通过指定IP和端口...
Spring Boot + Nuxt + Debian（八）：服务器安装nodejs，打包并部署nuxt项目
01-20
在本教程中，我们将探讨如何在Debian服务器上安装Node.js，然后打包并部署一个Nuxt.js项目。Nuxt.js是一个基于Vue.js的框架，用于构建服务器端渲染(SSR)的Web应用程序，而Spring Boot则通常用作后端服务。让我们逐个...
如何修改Vue打包后文件的接口地址配置的方法
10-15
在开发Vue应用时，经常会遇到需要根据不同环境（如本地开发环境和生产环境）改变接口地址的情况。为了方便管理和维护，本文介绍了如何修改Vue打包后文件的接口地址配置。 在常规的Vue项目中，我们可以简单地通过...
创建nuxt.js项目流程图解
10-15
在本教程中，我们将深入探讨如何创建一个Nuxt.js项目，以及在这个过程中涉及的关键知识点。 **1. 安装Nuxt.js项目** 创建Nuxt.js项目的第一步是确保你的系统已经安装了Node.js和npm（Node包管理器）。接下来，你...
vue cli3.0打包上线静态资源找不到路径的解决操作
10-15
这个问题通常出现在部署到服务器后，因为本地开发环境与线上环境的资源路径不同。以下是如何解决这个问题的详细步骤： **解决方法：** 1. **创建 `vue.config.js` 文件**： 在项目根目录下创建一个名为 `vue....
nuxt构建项目打包部署
qq_27080351的博客
06-30 870
nuxt
nuxt打包
weixin_44815800的博客
05-10 2057
nuxt3打包
nuxt 本地部署https
奔跑
06-16 553
若本地已经安装了git客户端，其中包括了openssl程序，可直接在项目文件目录打开git bash 界面，输入以下命令。1.使用 openssl 的 genrsa 命令生成一个服务器私钥文件。3.根据第 2 步的证书请求文件和第 1 步的服务器私钥文件生成证书。证书签名，根据要求填写一些相关信息，可一路按回车即可。好了 然后就npm run dev就行。第一步下载证书放在根目录。通过上面生成的私钥文件生成。然后配置server文件。2.生成证书请求文件。
nuxt项目打包上线之二
weixin_30784141的博客
08-05 664
之前写过一篇nuxt打包上线的文章，请看这里：https://www.cnblogs.com/daisygogogo/p/11218809.html 上一篇文章的部署流程有点不好的地方，就是它适用于只有唯一一个后台接口路径的部署，不适合需要根据多个环境切换后台接口的情况。 为了解决需要根据不同环境（本地，测试，线上）切换请求的baseURL，我们需要引入cross-env , 来实现...
【Nuxt】05 Nuxt2项目打包优化
ColdCoder的博客
09-27 1390
在nuxt.config.js配置。
Nuxt3打包部署到Linux（node+pm2安装和运行步骤+nginx代理）
qq_67503717的博客
08-26 5284
部署Nuxt3项目流程，及用Nginx配置反向代理。
nuxt generate静态打包部署
08-08
nuxt generate是一个 Nuxt.js 提供的命令，用于将你的应用程序静态地生成为一个应用程序（包含HTML、CSS和JavaScript文件）以进行部署。 步骤如下： 1. 确保你已经通过命令行安装了Nuxt.js并创建了一个Nuxt.js项目。 2. 在项目根目录下，使用命令行运行nuxt generate命令。 3. Nuxt.js会根据你在项目中定义的配置文件（nuxt.config.js）中的设置，创建静态文件。 4. 生成的文件将默认存储在项目根目录下的"dist"文件夹中。 5. 将生成的静态文件部署到你的服务器或者静态文件托管服务上。 此外，还可以通过配置nuxt.config.js文件中的generate选项来自定义生成配置，如生成的文件目录、URL前缀等。 生成的静态文件部署后，可以通过访问服务器的静态文件URL来访问你的应用程序。由于静态文件已经包含了所有前端代码，因此无需再依赖服务器端渲染。 总结起来，使用nuxt generate静态打包部署，可以将你的Nuxt.js应用程序生成静态文件，方便部署到任何静态文件托管服务上，同时提供了更快的加载速度和更好的SEO优化效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值