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

时间: 2024-10-08 17:51:16

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

vue项目打包上线

1.配置history模式(开启history模式,base重新定义文件要运行在那个根目录下) 2.配置路径 3.运行 npm run build  将打包生成的dist文件夹重命名为Template(因为上边已经重新定义基准文件) 4.将Template文件发送给后台 运行在他们的根目录下 项目打包上线完毕 原文地址:https://www.cnblogs.com/wjsy/p/10172143.html

vue项目打包上线的步骤

1.修改配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了解决js找不到的问题) 使用npm  run  build 打包会生成: 上传到服务器就可以直接通过网址直接访问. 原文地址:https://www.cnblogs.com/mo3408/p/10893379.h

AndroidStudio项目打包成jar

前言:在eclipse中我们知道如何将一个项目导出为jar包,现在普遍AndroidStuido开发,这里一步一步详加介绍AS项目打包成jar,jar和arr的使用 一.作用: 为了供其它项目使用,将项目打包成jar 二.步骤(AndroidStudio): 1.像平常一个样新建一个项目(步骤省略)2.(在步骤1的基础上)点击File-->New-->New Module->选择Android Library-->点击Next(如下图:)定义好Library的工程名:library

IBM规则引擎(ODM)入门系列二(2):规则项目打包、发布及服务端测试

上一篇博文介绍了如何搭建安装res服务,这次一起来看看如何在Rule Designer中创建RuleApp并将其发布到Res服务上. 打开Rule Designer,查看一下我们的规则项目: 以PersonRule规则项目为例,如上图中,在“规则项目图”视图中,点击“创建RuleApp项目”: 输入项目名“PersonRuleApp”,点击下一步: 因为点击的是PersonRule规则集项目的“创建RuleApp”导航链接,所以这里选择规则集项目默认为“PersonRule”,点击完成. 此时在

Xcode 8 打包上线 iTunes Connect 找不到构建版本

Xcode 8 打包上线 iTunes Connect 找不到构建版本 最近苹果推出新的mac操作系统(macOS Sierra 10.12),大家可能都已经升级了,作为一个开发者,小编肯定是第一时间升级.随之,开发工具 Xcode 也升级到了最新版 Xcode 8.0. 马上就到国庆了,想必很多人和小编一样在加班赶进度,上架项目.当我们把一切BUG解决完(当然这是不可能的),提交成功之后,欣喜的去 iTunes Connect 上发布版本时. 咦...哇...怎么回事?构建版本旁边没有出现我们

java项目打包生成MD5文件

之所以发出这篇博客,因为我前几天搞这个问题搞了几天,各种百度居然都没有找到相关的案例,虽然很简单的事件.可是百度博客上面居然都搜不到案例o(* ̄︶ ̄*)o觉得奇怪!!! 新总监来了,项目要上线,以前都没听旧总监提起要做什么打包生成MD5文件:一下子就蒙了o(* ̄︶ ̄*)o,主要原因还是因为我太菜O(∩_∩)O哈哈~ 因为项目要上线,很多工作要做,总监也忙的基本搭不上话,这几天会也没开,能完成那也是因为我对工作比较认真负责啊(手动滑稽): 以前没做过这样的事情,所以开始问其他朋友,都说直接上线就上

从零开始搭建vue+element-ui后台管理系统项目到上线

前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做:看过一个不错的后台配置模板(vue-element-admin),页面也挺美的,但是还是碍于不想看太多关于这个模板的配置说明,于是又拉出来之前我搭建的简易版的模板,决定重构下,使用自己搭建的后台系统模板,配置非常简单:本文将从初始化项目开始一直到打包上线做一个详细的介绍,看完本文章,绝对会对其中的一

如何将nuxt项目部署到github pages (码云 pages) 上

如何将nuxt项目部署到github pages (码云 pages) 上 前言:此文章包括了以下几点: 1:如何部署2:部署到Page后,静态资源加载报4043:从默认页面跳转到其他页面报4044:github Pages上的页面打开特别慢. 一:使用Nuxt.js脚手架工具create-nuxt-app快速创建项目 1:确保安装了npx(npx在NPM版本5.2.0默认安装了): npx create-nuxt-app <项目名> 后续选项可以自己跟实际情况选择. 二:在github上新建

Eclipse将引用了第三方jar包的Java项目打包成jar文件的两种方法

方案一:用Eclipse自带的Export功能 步骤1:准备主清单文件 “MANIFEST.MF”, 由于是打包引用了第三方jar包的Java项目,故需要自定义配置文件MANIFEST.MF,在该项目下建立文件MANIFEST.MF,内容如下: Manifest-Version: 1.0 Class-Path: lib/commons-codec.jar lib/commons-httpclient-3.1.jar lib/commons-logging-1.1.jar lib/log4j-1.