精华内容
下载资源
问答
  • nuxt项目部署

    2020-05-25 16:34:37
    npm i -g pm2 sudo ln -s /root/nodejs/bin/pm2 /usr/local/bin/ 2,打包和部署nuxt项目 运行 npm run build 修改package.json文件,添加config配置: { "name": "swqw", "version": "1.0.0", "description": "My ...

    1,安装node,npm,pm2

    必须使用root身份进入,非root身份参考https://blog.csdn.net/u010218170/article/details/104733217

    进入node官网获取最新的安装文件链接

    下载安装文件:

    wget https://nodejs.org/dist/v12.16.3/node-v12.16.3-linux-x64.tar.xz

    解压:

    tar -xvf   node-v6.10.0-linux-x64.tar.xz  

    建立软连接(需要root权限):

    mv node-v6.10.0-linux-x64  nodejs 
    sudo ln -s /root/nodejs/bin/npm /usr/local/bin/ 
    sudo ln -s /root/nodejs/bin/node /usr/local/bin/
    

    安装pm2并建立软链接:

    npm i -g pm2
    sudo ln -s /root/nodejs/bin/pm2 /usr/local/bin/

    2,打包和部署nuxt项目

    运行

    npm run build

    修改package.json文件,添加config配置:

    {
      "name": "swqw",
      "version": "1.0.0",
      "description": "My luminous Nuxt.js project",
      "author": "sdx",
      "private": true,
      "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate"
      },
      "dependencies": {
        "@nuxtjs/axios": "^5.3.6",
        "element-ui": "^2.4.11",
        "nuxt": "^2.0.0",
        "qs": "^6.9.4",
        "vue-baidu-map": "^0.21.22",
        "vue-i18n": "^8.17.4"
      },
      "devDependencies": {
        "@nuxtjs/proxy": "^1.3.3",
        "less": "^3.11.1",
        "less-loader": "^6.1.0"
      },
      "config": {
        "nuxt": {
          "host": "0.0.0.0",
          "port": "3011"
        }
      }
    }

    将.nuxt,package.json,nuxt.config.js,static四个文件或文件夹上传到服务器

    如果使用nuxt自有服务器将项目上线,需要将package.json的config里面的host改为公网IP,并开放端口;如果使用nginx代理服务器则保持0.0.0.0

    在项目文件夹下运行:

    npm i
    npm start

    即可启动项目,并显示访问地址

    运行curl 访问地址,若启动成功,则打印页面的html文本出来

    3,开启进程守护

    在项目文件夹下运行:

    pm2 start npm --name "my-nuxt" -- run start

    开启进程守护

    运行:

    pm2 list

    可以查看进程守护列表和状态

    4,项目更新

    更改了项目后需要重新build打包和上传到服务器,

    运行:

    pm2 restart

    刷新页面即可看到更改后的内容

    5,关于nginx配置参考https://blog.csdn.net/weixin_36185028/article/details/110210234

    展开全文
  • Nuxt 项目部署

    2021-04-19 09:51:20
    Nuxt 项目部署 第一次部署Nuxt,网上找资料好久,有一部分帖子说只需要复制本地文件的.nuxt,static,package.json,nuxt.config.js这四个文件夹放到服务器目录文件下。这是错误的,应该上传这四个文件加自己所有修改过...

    Nuxt 项目部署

    感谢SegmentFault starkwang的文章

    第一次部署Nuxt,网上找资料好久,有一部分帖子说只需要复制本地文件的.nuxt,static,package.json,nuxt.config.js这四个文件夹放到服务器目录文件下。这是错误的,应该上传这四个文件加自己所有修改过的文件夹,否则编译成功后修改过的资源不存在,显示默认资源。
    我上传的项目目录为:(标红线的是我有修改或者新建的文件,都需要上传)
    在这里插入图片描述
    部署步骤:

    1、新建DockerFile文件

    FROM node:14.16.0
    MAINTAINER zch
    ENV NODE_ENV=production
    ENV HOST 0.0.0.0
    RUN mkdir -p /app
    COPY . /app
    WORKDIR /app
    EXPOSE 3000
    #如果在中国环境下构建请把下面注释打开
    RUN npm config set registry https://registry.npm.taobao.org
    RUN npm install
    RUN npm run build
    CMD ["npm", "start"]
    

    2、将DockerFile文件与所有需要上传的文件传到同一目录

    3、进入该目录执行命令

    构建镜像

    docker build -t replace .
    

    在这里插入图片描述
    构建镜像过程需要花费30分钟左右,大部分时间花在npm install上。
    构建过程中没有产生错误,如果产生错误就是node版本问题,修改DockerFile文件中node版本。

    启动容器

    docker run -d --restart=always --name replace -p 3000:3000 replace 
    

    在这里插入图片描述
    启动成功
    在这里插入图片描述

    展开全文
  • nuxt项目部署教程

    2021-11-02 10:06:03
    nuxt打包项目有两种方式:一个是npm...而目前我现在做的项目有一些资讯模块,需要随时更新,所以使用build方式进行打包部署 build:(pm2+nginx的方式) 在工作根目录执行npm run build 把.nuxt、static、nuxt.config

    nuxt打包项目有两种方式:一个是npm run generate, 另一个是npm run build。两种的区别是generate是生成一系列的静态页面,该页面的内容在打包的时候就已经注定了,即使某些有请求接口的数据变了,页面也不会变,所以该种方式适合一些内容不怎么改变的页面。而目前我现在做的项目有一些资讯模块,需要随时更新,所以使用build方式进行打包部署

    build:(pm2+nginx的方式)

    1. 在工作根目录执行npm run build

    2. 把.nuxt、static、nuxt.config.js、package.json文件压缩上传到服务器

    3. 在解压的目录下,执行npm install ,安装依赖

    4. 使用pm2运行项目:链接
      a. 安装pm2:npm install -g pm2
      b. 在目录下创建ecosystem.config.js

      // ecosystem.config.js
      module.exports = {
        apps: [
          {
            name: 'NuxtAppName', //你的项目名
            exec_mode: 'cluster',
            instances: 'max', // Or a number of instances
            script: './node_modules/nuxt/bin/nuxt.js',
            args: 'start'
          }
        ]
      }
      

      c. 执行pm2 start即可运行项目

    5. 以上步骤完成之后,项目即使跑起来了,但是无法外部访问,需要使用nginx
      a. nginx配置如下

    upstream blognuxt {
      server 127.0.0.1:3000; # 此处填写启动nuxt服务时的端口
      keepalive 64;
    }
    
    server
    {
        listen 80;
        server_name yystudy.top;
    	  index index.html index.php index.htm default.php default.htm default.html;
        root /www/wwwroot/yystudy.top;
        
        location / {
        proxy_http_version 1.1;
        proxy_set_header X-Nginx-Proxy true;
        proxy_cache_bypass $http_upgrade;
        proxy_pass http://blognuxt/; # 此处为upstream的名称,文件第一行定义的
        proxy_redirect off;
      }
        #SSL-START SSL相关配置,请勿删除或修改下一行带注释的404规则
        #error_page 404/404.html;
        #SSL-END
        
        #ERROR-PAGE-START  错误页配置,可以注释、删除或修改
        #error_page 404 /404.html;
        #error_page 502 /502.html;
        #ERROR-PAGE-END
      
        access_log  /www/wwwlogs/yystudy.top.log;
        error_log  /www/wwwlogs/yystudy.top.error.log;
    }
    

    window实现pm2自启
    官网下有两种解决方案:pm2-windows-service or pm2-windows-startup,下面的教程使用pm2-windows-service这个包

    1. 全局安装并配置 pm2-windows-service:npm i -g pm2-windows-service
    2. 添加pm2环境变量:PM2_HOME=C:/Users/Administrator/.pm2
      a. 右键 [我的电脑] - [属性] - [高级系统设置] - [环境变量] - 新建 [系统变量]
      在这里插入图片描述
      b. 查看pm2路径:默认安装在$HOME/.pm2,如果真找不到的话,可以执行pm2 log根据默认的日志打印位置预测pm2的路径,结果如下:
      在这里插入图片描述
    3. 安装window自启服务:终端管理员权限执行pm2-service-install命令,提示Perform environment setup? 选 n就行。此时, PM2服务已安装成功并已启动, 可以通过 Win+R 来查看,输入 services.msc 即可看到服务
    4. 用pm2启动程序后,添加到自启列表:pm2 save

    nginx配置https
    5. 首先需要先买一个ssl证书,这里使用的是阿里云免费证书
    6. 购买之后根据以下截图操作
    在这里插入图片描述
    选择nginx那项下载:
    在这里插入图片描述
    再点击帮助根据官方给的教程复制粘贴就行

    1. 配置之后的nginx配置文件示例:
    upstream blognuxt {
      server 127.0.0.1:3000; # 此处填写启动nuxt服务时的端口
      keepalive 64;
    }
    
    server {
        listen       80;
    		server_name yystudy.top;
    		# 自动跳转到https
    		rewrite ^ https://$http_host$request_uri? permanent;   	
      }
    
    server
    {
        
        listen 443 ssl;
        # listen 80;
        server_name yystudy.top;
    	  index index.html index.php index.htm default.php default.htm default.html;
        root /www/wwwroot/yystudy.top;
        
        ssl_certificate     /pub/4242126_www.yystudy.top.pem;  #需要将cert-file-name.pem替换成已上传的证书文件的名称。
        ssl_certificate_key  /pub/4242126_www.yystudy.top.key; #需要将cert-file-name.key替换成已上传的证书密钥文件的名称。
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        #表示使用的加密套件的类型。
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #表示使用的TLS协议的类型。
        ssl_prefer_server_ciphers on;
        location / {
        proxy_http_version 1.1;
        proxy_set_header X-Nginx-Proxy true;
        proxy_cache_bypass $http_upgrade;
        proxy_pass http://blognuxt/; # 此处为upstream的名称
        proxy_redirect off;
      }
    
        #SSL-START SSL相关配置,请勿删除或修改下一行带注释的404规则
        #error_page 404/404.html;
        #SSL-END
        
        #ERROR-PAGE-START  错误页配置,可以注释、删除或修改
        #error_page 404 /404.html;
        #error_page 502 /502.html;
        #ERROR-PAGE-END
      
        access_log  /www/wwwlogs/yystudy.top.log;
        error_log  /www/wwwlogs/yystudy.top.error.log;
    }
    

    pm2常用命令

    展开全文
  • nuxt项目部署(Linux)

    千次阅读 2020-07-16 11:19:57
    具体参照https://blog.csdn.net/fyshining/article/details/1073160242. nuxt部署 方式一: 本地打包后部署 (1)本地运行npm run build打包,然后把.nuxt、static、nuxt.config.js、package.json上传到服务器 (2)...

    1. 环境配置

    (1)nginx和代码中配置好域名和端口(服务端配置)
    (2)服务器安装node,npm,pm2
     具体参照https://blog.csdn.net/fyshining/article/details/107316024

    2. nuxt部署
    方式一: 本地打包后部署
    (1)本地运行 npm run build 打包,然后把 .nuxtstaticnuxt.config.jspackage.json上传到服务器
    (2)服务器到项目目录,执行 npm install 安装依赖

      注意:
       可能一:若出现如下图报错

        

       以上是因为服务器配置的python版本问题,若版本为3.x,卸载后安装2.7版本即可;

        可能二:若项目中使用node-sass,安装过程中可能会报错
        如果涉及权限(如下图)

        
        可执行 npm -g config set user root 赋予npm权限后再执行 npm install,具体参 照 https://blog.csdn.net/hanwuqia0370/article/details/90044709
        如果出现其他问题,可运行 npm install node-sass --unsafe-perm --save-dev来单独安装这个模块即可

    (3)执行npm run start查看能否启动项目服务;若ok,再使用 pm2 执行相关进程
      注:在这里,遇到了服务启动报错的情况,多次尝试无果(如下图)
      
      暂不知具体原因,目前怀疑是本地webpack与服务器不一致导致,遂放弃该方式,使用方式二部署成功;

    方式二: 服务器打包部署
    (1)如果vue-cli没有安装,执行 npm install -g vue-cli 安装vue-cli;
    (2)到项目目录下,执行 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装淘宝景象, 因为在国内用npm 安装会比较慢, 所有我们使用淘宝镜像安装 也就是cnpm (可选择使用,不强求),然后执行 ln -s /usr/local/node8.9.1/bin/cnpm /usr/local/bin/cnpm 建立cnpm软链供全局使用;
    (3)将所有nuxt相关项目文件传至服务器相关目录(源文件,不包括.nuxt,node_modules);
    (4)执行npm install 或 cnpm instaill 安装依赖,安装过程中出现的问题参照方式一中的处理方式;
    (5)依赖安装完成后,因为nuxt未全局配置,找到该项目nuxt位置(以 ./node_modules/.bin/nuxt为例, 具体可通过全局查找命令查找该项目对应nuxt位置- find / -name "nuxt" ),直接执行 ./node_modules/.bin/nuxt build 启动服务;
      
    (6)启动成功,再使用 pm2 执行相关进程;

    展开全文
  • npx create-nuxt-app 项目名称 根据需要选择配置和依赖 创建成功后 启动项目 进入项目目录 cd 项目名称 启动项目 npm run dev 浏览器访问http://localhost:3000/ 部署项目 1. 云服务器上...
  • nuxt项目部署到linux上

    2020-12-16 19:29:05
    1 安装nginx ...# nuxt项目url } nginx -s reload 查看某个端口是否有进程(用来查看nuxt项目是否启动) netstat -anp |grep 8000 9 页面访问服务名字192.0.0.1(已脱敏) server_name 192.0.0.1;
  • nuxt项目部署(windows环境)

    千次阅读 2019-11-09 11:54:33
    项目是由vue-cli转换过来的,编码工作是前端兄弟做的,然后给到我这边去部署,我压根不懂nuxt项目,这可把我折腾坏了,还好最后还是搞定了 (^▽ ^),赶紧记录一下。 首先把配置贴上来: package.json { "name": ...
  • (1)nuxt项目打包 详细请移步nuxt官网 第一步、在本地 npm run build,会在.nuxt文件夹下生成dist文件; 第二步、把本地文件的.nuxt,static,package.json,nuxt.config.js,这四个文件夹放到服务器目录文件下 比如我在...
  • nuxt项目部署心得

    2021-06-30 13:23:02
    昨晚部署一个nuxt项目的官网花了三个小时,实在是汗颜,赶紧写个博客记录一下,以免再犯 我的部署流程 运行环境:linux服务器,pm2进程守护,nginx反向代理 0.服务器安装nginx和pm2 安装nginx已有众多大神写过相当...
  • Nuxt项目部署到Linux Nginx反向代理 Kaki的博客 1.nuxt 项目先本地执行 yarn build命令 2.拷贝下面标记的文件至服务器部署目录/opt/deploy/front 3.进入目录执行(linux) cd /opt/deploy/front npm install -...
  • 关于nuxt部署参阅https://blog.csdn.net/weixin_36185028/article/details/106335681 1,安装nginx 2,配置nginx 在nginx中配置能在不同的设备自动定向到h5或pc页面 假设网站域名为xxx.com,nuxt启动后pm2的list...
  • 前端nuxt 项目部署

    2020-05-30 16:24:51
    两种部署方式: 1 静态部署 2 启动一个nuxt 服务器 npm run build 之后,赋值以下文件到服务器 //本地 npm run build //服务器 npm install -production npm run start ...
  • 以往在nuxt项目中,打包静态化部署的的文件如下: 路径为绝对路径,当项目的域名为二级域名的时候,就不能打包为这绝对路径了。 nuxt不同于vue项目,思索了许久,终于找到了配置的地方: nuxt项目中 nuxt.config.js...
  • 由于seo的需要,新的前端项目采用nuxt服务器端渲染,现记录Linux服务器端部署过程。 一、搭建nodejs环境 (一)下载Nodejs 下载地址:https://nodejs.org/zh-cn/download/ 下载稳定版(长期支持版)的Linux 二进制...
  • Vue.js原来是开发SPA(单页应用)的,但很多人想用Vue开发多页应用(有利于SEO操作),并在服务端完成渲染,于是Nuxt.js框架出生了,可实现用命令把vue项目生成为静态html。b.是什么?Nuxt.js简单的说是Vue.js的通用框架...
  • 楼主系统说明: 系统环境: CentOS7.3 64位 版本工具: svn 1.7.14 nodeJs: 8.9.1 npm: 5.6.0 cnpm: 5.2.0 一: 安装vue相相关包 ...到项目目录下 cd /data/www/project/shop/yf_mall_v1.0.5 安装淘宝景象,...
  • nuxt项目发布-部署

    2021-01-15 20:10:50
    如何将nuxt项目进行发布部署 打包 Nuxt.js 应用 命令 描述 nuxt 启动一个热加载的web服务器(开发模式) localhost://3000 nuxt build 利用webpack编译应用,压缩js和css(发布用) nuxt start 以生产模式...
  • 1.安装cross-env插件 npm install -y -D ...在项目更目录下建 ecosystem.config.js 文件 module.exports = { apps: [{ name: 'pc-website', exec_mode: 'cluster', instances: 'max', // Or a number of instanc
  • Nuxt项目部署

    千次阅读 2018-08-29 06:21:50
    项目介绍 项目中整合 vue + nuxt + axios + vuex + vue-router (nuxt 自带 vuex 和 vue-...关于项目部署折腾了我好多时间,网上许多百度来的文档不适合我的项目,所以自己摸索着终于部署起来了,开心O(∩_∩)O~~ 1...
  • 1.在nuxt项目根目录下创建server.js2.安装chalknpm install chalkserver.jsconst http = require('http');const chalk = require('chalk');const OneProcess = require('child_process');const CMD = 'npm run ...
  • linux 部署nuxt项目

    2020-05-15 16:00:24
    } } 5:将项目上传到服务器上并启动项目:上传位置随意 6:转到项目存储位置并执行 //package.json中的依赖需要安装 cnpm install 7:启动npm:注意到上传的项目位置进行启动 npm run start 8:启动项目:注意到...
  • 1、配置文件–使全部ip都可访问 在package.json "config": { "nuxt": { "host": "0.0.0.0", "port": "3000" } } 或nuxt.config.js上加上 ...2、项目打包 npm run build 3、上传文件 上下面几个文件打包压
  • 1、先在本地执行npm run build 命令,然后将项目根目录下除了node_modules文件夹,其他都打包上传到服务器web服务下,注意.nuxt是隐藏文件夹。当然其实不build也可以,在服务上执行sudo npm install 后再执行 run ...
  • 我们部署nuxt项目需要使用到如图框起来的两个.json文件和两个文件夹 前提:需要在服务器上安装node环境,以方便下载依赖。 图中node_modules则是相关依赖,与vue项目相同。 nohup.out是后台运行日志,nuxt.sh是运行...
  • pm2 start npm --name "项目名" -- run start 有可能失败,需要全局安装nuxt,pm2 npm i nuxt -g npm i pm2 -g

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,267
精华内容 906
关键字:

nuxt项目部署