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

nuxt项目打包上线之二相关推荐

nuxt项目打包后阿里云播放器错误：ReferenceError Aliplayer is not defined
nuxt项目打包后阿里云播放器错误:ReferenceError: Aliplayer is not defined 这个问题搞了我一天,阿里云视频播放有时点进去是好的,有时候就报错,而且一刷新也报这 ...
nuxt.js 打包上线
1.首先在项目根目录执行命令. npm run build 命令执行完成后,不会生成像vue脚手架一样的dist目录,而是.nuxt目录. 2.服务器端上线. 打包后,在根目录创建dist目录(为了跟 ...
基于Vue项目打包上线配置
打包上线开发阶段 : npm run serve 发布阶段 : npm run build build之前 1. 把基准地址, 由开发阶段的换成发布阶段的 //main.js axios.defau ...
vue 项目打包上线后 js css 文件找不到
在vue项目完成后打包上线,放到服务器上发现js和css引入不到,页面加载不出来. 在使用vue-cli3以上版本构建的应用时,跟以下方式api有些区别: 如何区分是哪个版本? 可查看项目中是否有co ...
Nuxt - 项目打包部署及上线到服务器流程（SSR 服务端渲染）
前言网上大部分关于 Nuxt 打包部署教程真的是可以用五花八门来形容,这对于第一次接触的朋友简直是无从下手. 本文将尽可能详细的描述,打包部署及上线到服务器完整流程. 准备工作强烈建议您打开官方 ...
iOS9项目打包上线(个人记录,2015年11月11日)
页首声明: 题外话: 原本是昨天上传的,结果今天早上来看就剩开头了,剩下的都被吞了,桑心.花了四个小时做的呀... 本文是博主项目记录记录,可能存在顺序错误等,大家可以取其精华. 转载请注明出处,觉得 ...
【Vue3】项目打包上线部署到服务器
1.npm run build打包项目,生成dist文件夹: 2.将dist文件夹复制,粘贴到服务器中:
【新手向】Nginx+pm2部署和发布Nuxt项目实现服务端渲染
Nuxt项目完成了剩下的就是部署到服务器上了但是网上的教程多半含混不清顺序混乱对新手不太友好索性自己写一个比较全的教程吧介绍 Nuxt项目打包后发布在服务器上是前台运行的启动后若将窗口 ...
vue-cli 如何打包上线的方法示例
为什么80%的码农都做不了架构师?>>> vue-cli 如何打包上线的方法示例以vue创建的官方例子为例子,我们在开发环境的时候会 npm run dev ,生成而想要打 ...

nuxt项目打包上线之二

nuxt项目打包上线之二相关推荐

最新文章

热门文章