nuxt的项目部署到线上环境,有多种方法,这里分享我使用的方法,一步步照着配置,就可以配置成功~

(1)项目先执行npm run build 打包好
 
(2)服务器安装node 和pm2依赖
服务器:切换到希望安装这两个依赖的目录下,依赖可以用于多个node项目,这里我新建了node_project文件夹
安装 node:
第二步解压:xz -d node-v10.16.0-linux-x64.tar.xz tar -xvf node-v10.16.0-linux-x64.tar
第三步重命名:mv node-v10.16.0-linux-x64 node
第四步修改环境变量:vi ~/.bash_profile
PATH=$PATH:$HOME/bin   // 修改前 PATH=$PATH:$HOME/bin:/usr/local/src/node/bin   // 修改后
改好之后保存退出
第五步编译刚刚修改的文件:source ~/.bash_profile
 
安装pm2
npm i -g pm2
 
上传打包后的文件到node_project /web-pc,其中web-pc是我们的项目名称,一共有四个文件需要传
 
 
(3)启动项目
1. 切换到项目目录 cd web-pc
2.执行 npm install -production 安装依赖(依赖有变更或者未安装过)
3.使用pm2 启动项目: pm2 start npm --name "web-pc" -- run start
4.启动成功没有问题的话,可以设置开机启动项目
pm2 save #保存当前开机启动列表
pm2 startup #设置开机启动
 
完成
 
 
pm2的一些常用命令
$ pm2 stop all                  # 停止所有的应用程序
$ pm2 stop 0                    # 停止 id为 0的指定应用程序
$ pm2 restart all               # 重启所有应用
$ pm2 reload all                # 重启 cluster mode下的所有应用
$ pm2 delete all                # 关闭并删除所有应用
$ pm2 delete 0                  # 删除指定应用 id 0
 
最后分享一下经过简单基础化配置过后的项目代码,
觉得有用不妨给个star或者赞哦~
 
主要配置有:
  • element-ui引入
  • axios.js 插件引入(初始化项目的时候也可以选择),根据当前环境,设置defaultURL
  • 配置proxy代理
  • scss使用
  • middleware中间件鉴权,尝试过在nuxt项目中使用路由守卫,但是不成功,需要使用自带的middleware中间件
  • 详情页面展示,nuxt的动态路由页面,跟普通vue页面有点不一样,需要新建文件夹包裹,详见pages下的shopDetail页面
  • error错误页面自定义,打印错误信息到页面上,使得开发过程中调试更加方便,点击“我的客服”页面可见
 
 

nuxt项目打包上线,以及nuxt项目基础代码分享的更多相关文章

  1. nuxt项目打包上线之二

    之前写过一篇nuxt打包上线的文章,请看这里:https://www.cnblogs.com/daisygogogo/p/11218809.html 上一篇文章的部署流程有点不好的地方,就是它适用于只 ...

  2. vue.js项目打包上线

    最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架 ...

  3. 使用cmd命令创建maven(web)项目+项目转换成IDEA项目+项目打包+Jetty运行Web项目

    3条件:配置好环境 配置环境教程:https://www.cnblogs.com/weibanggang/p/9623705.html 第一步:查看版本信息,在cmd输入mvn –version,如果 ...

  4. 基于vue脚手架的项目打包上线(发布)方法和误区

    最近要把vue脚手架开发的一个项目上线,只知道vue脚手架是基于node的服务端项目,那么只需要 npm run dev 就可以轻松启动整个项目,当我想当然的给服务器配置合适的node环境(这里也遇到 ...

  5. vue项目打包上线时的配置操作

    vue的图片路径,和背景图片路径打包后错误解决 2017-12-11 16:00 by muamaker, 7037 阅读, 0 评论, 收藏, 编辑 最近在研究vue,老实的按照官网提供的,搭建的了 ...

  6. vue项目打包上线发现 360 浏览器不兼容?

    分享链接: 文档:解决vue 和 360 浏览器兼容问题.note链接:http://note.youdao.com/noteshare?id=41914c6dbb4238d765b26d59aa05 ...

  7. 解决项目打包过程检出项目出现 svn:e15500错误

    svn:E15500 is already a working copy for a different url 原因:文件夹含有svn信息的隐藏文件未删除 解决办法:把该文件夹删除掉,然后重新建立同 ...

  8. JAVA基础代码分享--模拟人机猜拳系统

    问题描述: 一.主要功能: .电脑与人互动,实现“剪刀.石头.布”的游戏: 1.1 角色登陆: ******************** ***欢迎进入猜拳游戏*** **************** ...

  9. JAVA基础代码分享--求圆面积

    问题描述 用户输入圆的半径,计算并显示圆的面积 代码分享 /** * @author hpu-gs * 2015/11/25 */ public class Circle { public stati ...

随机推荐

  1. QT---基于WinPcap的局域网络管理工具(主机扫描、包过滤、ARP攻击、端口扫描)

    主要功能 本机适配器扫描 局域网各主机扫描 类似于WinShark的抓包工具,能够简单的过滤Tcp.Udp.Arp等包 ARP攻击功能,限制局域网内指定主机上网 流量统计,统计实时网速 多线程攻击,多 ...

  2. 教你如何在 Visual Studio 2013 上使用 Github

    介绍 我承认越是能将事情变简单的工具我越会更多地使用它.尽管我已经知道了足够的命令来使用Github,但我宁愿它被集成到IDE中.在本教程中,我会告诉你使用Visual Studio 2013如何实现 ...

  3. 关于客户端javascript的理解及事件浅析

    1,核心JavaScript和客服端JavaScript都有一个单线程执行模型.脚本和事件处理程序在同一时间只能执行一个,没有并发性.这样保持了js编程的简单性. 2,document的定义:一些呈现 ...

  4. cloudsim 3.0.3下载与安装教程

    1.配置jdk(之前的文章都讲解过,这里就不具体说了) 2.安装eclipse或MyEclipse 3.下载cloudsim压缩包,这个的官网是需要FQ,这里贴上我的下载地址 链接:https://p ...

  5. SYN2101型 NTP网络时间服务器

    SYN2101型  NTP网络时间服务器   时钟校准服务器时间 ntp服务器ntp时间校准服务器使用说明视频链接: http://www.syn029.com/h-pd-56-0_310_1_-1. ...

  6. 细谈unity资源加载和卸载

    转载请标明出处:http://www.cnblogs.com/zblade/ 一.概要 在了解unity的资源管理方式之后,接下来细谈一下Unity的资源是如何从磁盘中加载到运行时的内存中,以及又是如 ...

  7. 从此Redis是路人

    从此Redis是路人 序言:Redis(Remote DIctionary Server)作为一个开源/C实现/高性能/基于内存的key-value存储系统,相信做Java的小伙伴都不会陌生.Redi ...

  8. 第五章 .net core该怎么玩

    项目目标部署环境:CentOS 7+ 项目技术点:.netcore2.0 + Autofac +webAPI + NHibernate5.1 + mysql5.6 + nginx 开源地址:https ...

  9. MyBatis中二级缓存和延时加载同时开启的问题

    首先,二级缓存默认不开启! 要配置 <setting name="cacheEnabled" value="true"/> 在MyBatis中:一级 ...

  10. Error: Cannot find module '@babel/runtime/core-js/object/keys'(npm start报错)

    1.问题描述: 在npm start启动react项目的时候,会出现Cannot find module '@babel/runtime/core-js/object/keys'的报错: 打开:项目根 ...