欢迎访问 如意编程网!

如意编程网

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

nuxt项目打包上线之二

发布时间:2024/7/5 编程问答 5 豆豆
如意编程网 收集整理的这篇文章主要介绍了 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项目打包上线之二的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错,欢迎将如意编程网推荐给好友。