nuxt项目打包上线之二

之前写过一篇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:
第一步下载: curl -O https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz
第二步解压: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的时候的项目名
项目代码请戳github:https://github.com/daisygogogo/nuxt-element-ui-pc-website

转载于:https://www.cnblogs.com/daisygogogo/p/11304421.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/482581.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

elasticsearch-1

单实例安装 1、官网下载tar压缩包 https://www.elastic.co/downloads/elasticsearch 2、将下载好的压缩包elasticsearch-5.5.2.tar.gz上传到linux服务器,并解压缩 tar -vxf elasticsearch-5.5.2.tar.gz 3、cd进入到elasticsearch-5.5.2目录中,启动ela…

清华博士后用10分钟讲解AlphaCode背后的技术原理,原来程序员不是那么容易被取代的!...

来源:AI科技评论不久前,DeepMind 的团队发布了一个可以自动生成竞赛级代码的人工智能系统——AlphaCode,号称「媲美普通程序员」,一经发表就在国内外的AI圈里引起了巨大轰动。 -论文地址:https://storage.googleapis.c…

(SQLlite3 Source Code 系列之一) 前言

(写在前前面, 研究什么都是要 Read the fucking source code ! 否则就是雾里看花。当然分析源码是很痛苦的过程,人都是想走捷径的,但是我的经验告诉我:选择不走捷径才是真正的捷径。记住了,出来混&#xff…

css基础选择器

文章目录css简介css语法规范css代码风格:css选择器的作用css基础选择器标签选择器:类选择器多类名选择器id选择器:id选择器和类选择器的区别:通配符选择器:选择器总结css简介 ​ CSS 是层叠样式表 ( Cascading Style …

深度学习模型模拟大脑地形图,有助于回答大脑不同部分如何协同工作

来源:ScienceAI编辑:凯霞大脑中处理视觉信息的部分——颞下(IT)皮层——受损可能是毁灭性的,尤其是对成年人而言。那些受影响的人可能会失去阅读能力(一种称为失读症的疾病)或辨认面孔&#xff…

深度学习再登Science:万物皆可做神经网络处理器,你甚至可以用锅碗瓢盆

来源:机器学习研究组订阅想象一下,你周围的任何东西,比如一个煎锅、一个玻璃镇纸,都可以用来当成神经网络的中央处理器,那是什么感觉?神经网络简单来说,是一种模仿大脑执行复杂任务的只能系统&a…

css目标

第一天 第二天

Gotta Catch Em All!——三元环计数

传送: https://vjudge.net/problem/Kattis-gottacatchemall 前置知识: 三元环计数 https://www.cnblogs.com/Dance-Of-Faith/p/9759794.html 思路: 首先去重边,记每个点的度数为n,三元环个数为m,答案为(∑…

【前瞻】机器人领域十项前沿技术

来源:工业互联网观察 机器人大讲堂近些年来,机器人行业发展迅速,机器人被广泛应用于各个领域尤其是工业领域,不难看出其巨大潜力。与此同时,我们也必须认识到机器人行业的蓬勃发展,离不开先进的科研进步和…

day27 网络编程一

网络编程 基础 一 软件开发架构 # c/s架构(client/server) c:客户端 / s:服务端 # b/s架构(browser/server) b:浏览器 / s:服务器 ps:bs架构本质也是cs架构 手机端看上去cs架构比较火,实际上bs已经在崛起,微信支付宝都在做一件事:统一接口,手机端之后肯定也是bs比较火 未来应用…

不止摩尔定律,计算领域值得学习的定律还有哪些?

来源:新智元当下,计算机领域最受欢迎的两大定律是:摩尔定律和梅特卡夫定律。摩尔定律,是以Intel(英特尔)联合创始人Gordon Moore(戈登•摩尔)为命名,摩尔定律预言,芯片上…

zz -- QQ圈子感想

前天QQ圈子上线,昨晚我试了一下。 最初的反应是惊恐。各种陈年的关系,万年不联系的朋友,都冒出来了。包括去澳洲留学的外甥女(我从不知她的QQ),11年前跳槽离开的公司同事,8年前把我甩掉后不再联…

世界一流大学如何建设人工智能学科

来源:光明日报作者:李锋亮 庞雅然 人工智能人才培养是变革核心人工智能、基因工程、纳米科学并列为21世纪三大尖端技术,是工业革命4.0的变革核心。其中,人工智能涉及广泛的知识领域,包括技术体系内的数学基础、技术基础…

VS2010中的路径设置

相对路径的含义: .\代表本级目录, ..\代表上级目录, \是VC保留字,所以在你写程序时要用到\时就要用\\代替, 网络路径用/。转载于:https://www.cnblogs.com/leohan2013/p/3352665.html

机器学习获量子加速!物理学家与计算科学家「自然联姻」

来源:新智元AI和量子计算的碰撞,会产生什么神奇的火花?IBM团队的一项研究表明,在机器学习任务上,已经找到了量子计算能够加速数据分类的证据,远超传统算法。未来,基于量子的机器学习加速器可能就…

day28 socket网络编程

一 socket 套接字 二 粘包问题 一 socket 套接字 1.1 为何学习socket一定要先学习互联网协议: 1.首先:网络编程目标就是教会你如何基于socket编程,来开发一款自己的C/S架构软件 2.其次:C/S架构的软件(软件属于应用层…

2022年值得关注的8个人工智能趋势

来源:AI前线作者:Michael Spencer译者:Sambodhi策划:凌敏1. AI-on-5G2022 年,工业 AI 和 AI-on-5G 物联网应用将会成为主流。想象一下,当我们以元宇宙为目标的时候,我们对物理空间的升级方式同样…

破解 更新

SyntaxEditor(4.0.287.0) ChartFX(7.0.3754.18555) AddFlow AddFlowWPF(1.2.0.0) 注册机 AddFlow(2.3)注册机 Codejock Software(13.4.0) CuteEditor.6.4 Devart.dotConnect(3.0.86.0) FD.NET(2.80.3916.13774) dotnetbar90 DXperience 10.2.4 ExpertXLS Excel Library for .NE…

我国科学家首次揭示“时空”记忆在猕猴大脑中表征的几何结构

来源:央视新闻客户端作者:帅俊全 2月11日,国际学术期刊《科学》以长文形式发表了题为《序列工作记忆在猕猴前额叶表征的几何结构》的研究论文。近日,中国科学院脑科学与智能技术卓越创新中心与国内多家单位合作,发现神…

智源学术顾问David Harel:经典建模与AI的联姻,如何攻破机器学习的可解释性?| 大师讲座...

来源:智源社区讲者:David Harel整理:熊宇轩编辑:李梦佳导读:设想一下,现在我们要建造一种工厂机器人,能移动物体、组装零件、抬起物体。机器学习专家自然会采用深度学习、神经网络一类的AI技术&…