之前写过一篇nuxt打包上线的文章,请看这里:https://www.cnblogs.com/daisygogogo/p/11218809.html

上一篇文章的部署流程有点不好的地方,就是它适用于只有唯一一个后台接口路径的部署,不适合需要根据多个环境切换后台接口的情况。

为了解决需要根据不同环境(本地,测试,线上)切换请求的baseURL,我们需要引入cross-env , 来实现环境变量的设置,根据环境变量来切换baseURL。

为了设置环境变量,我们需要把打包的环节放到服务器,在服务器端进行打包。

首先我们需要保证项目中已经安装了cross-env,并且在nuxt.config.js中设置了env变量

 env: { //环境变量
__ENV: process.env.__ENV
}

package.json中也做了命令配置

  "scripts": {
"test": "jest",
"dev": "cross-env process.env.__ENV=dev nuxt",
"build": "nuxt build",
"build-testing": "cross-env process.env.__ENV=testing nuxt build",
"rc": "cross-env process.env.__ENV=rc pm2 start npm --watch --name 'web-pc' -- run start",
"serve": "cross-env process.env.__ENV=serve pm2 start npm --watch --name 'web-pc' -- run start",
"start": "nuxt start",
"generate": "nuxt generate"
}

在需要使用的地方就可以这么使用了,比如axios.js

  let baseURL = "";
if(process.env.__ENV == 'rc'){
baseURL = 'http://rc.xxx:8011'
}else if(process.env.__ENV == 'production'){
baseURL = 'https://www.xxx:4011'
}else{
baseURL = 'http://test.xxx:8011'
}

接下来就说说我的部署步骤,由于直接在服务器打包,我们需要安装所有项目的依赖,为了安装依赖速度能快一点,我使用了淘宝镜像源。

第一:首次部署项目
(1)服务器安装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
 
--安装 cnpm
cnpm -v
查看是否安装了淘宝镜像源,有东西打印出来则已安装,没有则安装,安装完成之后
npm install -g cnpm --registry=https://registry.npm.taobao.org
 
安装完成后建立软链接: (如果不知道cnpm的位置,可以查找cnpm所在位置: find / -name cnpm)
ln -s /usr/local/node_project/node/lib/node_modules/cnpm/bin/cnpm /usr/local/bin/cnpm
 
再执行一下查看 cnpm-v 看是否安装成功
 
 
--安装 unsafe-perm,避免个别依赖由于权限问题无法安装
cnpm install --unsafe-perm
 
(2) 从svn拉取项目代码到本地(全量拉取即可,前端忽略提交node_modules,.nuxt,.history文件夹),安装依赖 cnpm install
(3) 根据不同环境打包项目
测试环境:npm run build-test
rc环境: npm run build-rc
线上环境: npm run build-production
(4)启动项目:pm2 start npm --name "official-website" -- run start
 
第二:后续更新项目
(1):从svn拉取最新代码
(2):切换到项目目录下执行 cnpm install
(3):根据环境打包项目:
npm run build-test
npm run build-rc
npm run build-production
(4)pm2重启项目 pm2 restart official-website, official-website为上面启动pm2的时候的项目名
 

nuxt项目打包上线之二的更多相关文章

  1. nuxt项目打包上线,以及nuxt项目基础代码分享

    nuxt的项目部署到线上环境,有多种方法,这里分享我使用的方法,一步步照着配置,就可以配置成功~ (1)项目先执行npm run build 打包好   (2)服务器安装node 和pm2依赖 服务器 ...

  2. vue.js项目打包上线

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

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

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

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

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

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

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

  6. Nuxt 项目性能优化调研

    性能优化,这是面试中经常会聊到的话题.我觉得性能优化应该因具体场景而异,因不同项目而异,不同的手段不同的方案并不一定适合所有项目,当然这其中不乏一些普适的方案,比如耳熟能详的文件压缩,文件缓存,CDN ...

  7. AndroidStudio项目打包成jar

    AndroidStudio项目打包成jar 前言:在eclipse中我们知道如何将一个项目导出为jar包,现在普遍AndroidStuido开发,这里一步一步详加介绍AS项目打包成jar,jar和ar ...

  8. 从零开始搭建vue移动端项目到上线的步骤

    初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack myproject(项目目录 ...

  9. vue菜鸟从业记:完成项目最后一公里之真机测试和打包上线

    最近我朋友王小闰他们公司的项目开发已经进入收尾阶段,前后端并行开发的差不多了,联调也调过了,上篇文章里也讲到了,所谓联调,就仿佛在说“我也不知道我的接口文档写的对不对,我们验证一下吧?我也不知道我的数 ...

随机推荐

  1. VUE组件如何通信

    Vue父子组件如何通信? 子组件通知父组件(调用父组件方法) 在父组件使用 on(eventName)监听事件,在子组件使用emit(eventName) 触发事件 : 父组件通知子组件(调用子组件方 ...

  2. mongodb MongoDB C#/.NET driver version

    The first column lists the driver version(s). C#/.NET Driver Version MongoDB 2.6 MongoDB 3.0 MongoDB ...

  3. linux 测试磁盘iops 方法详解

    一.FIO安装  wget http://brick.kernel.dk/snaps/fio-2.0.7.tar.gz  yum -y install libaio-devel  tar -zxvf ...

  4. 一百三十三:CMS系统之版块管理一

    把模型创建到公共的models里面 class BoardModel(db.Model): __tablename__ = 'board' id = db.Column(db.Integer, pri ...

  5. LODOP纸张高度不定的纯文本累计高度

    小票由于纸张没有确定的高度,根据内容多少,小票打印机出多少纸,在设置纸张的时候,需要把纸张设置成不定高的纸张.简短问答:小票打印 ,参考样例18 http://www.c-lodop.com/demo ...

  6. Vscode中打开、新建内部终端快捷键方法

    设置->键盘快捷方式->搜索集成终端->切换集成终端/新建集成终端 Windows 电脑 组合键 说明 Ctrl + ~ 打开默认终端 Ctrl + Shift + ~ 新建新的终端 ...

  7. Hadoop学习笔记之二 文件操作

    HDFS分布式文件系统:优点:支持超大文件存储.流式访问.一次写入多次读取.缺点:不适应大量小文件.不适应低时延的数据访问.不适应多用户访问任意修改文件. 1.hadoop用于大数据处理,在数据量较小 ...

  8. 【VS开发】#pragma预处理命令

    #pragma预处理命令 #pragma可以说是C++中最复杂的预处理指令了,下面是最常用的几个#pragma指令: #pragma comment(lib,"XXX.lib") ...

  9. rdbtool

    https://www.cnblogs.com/wjoyxt/p/10577361.html https://github.com/sripathikrishnan/redis-rdb-tools h ...

  10. HDU4513 【mannacher算法】

    题目链接http://acm.hdu.edu.cn/showproblem.php?pid=4513 Problem Description 吉哥又想出了一个新的完美队形游戏! 假设有n个人按顺序站在 ...