vue 和 ssr+nuxt.js 配置环境变量以及pm2进行服务部署
前言
vue-ssr+nuxt.js开发的跨境电商的配置的项目环境变量。
nuxt.js配置环境变量
第一步：安装cross-env插件
npm install cross-env --save
第二步：根目录下创建env.js文件
第三步：env.js文件配置环境变量
配置各个环境下的接口地址和服务端口
export default {dev: {server: {host: '0.0.0.0',port: 8888,},api: {port: '',host: '开发环境接口地址'}},test: {server: {host: '0.0.0.0',port: 7085,},api: {port: '',host: '测试环境接口地址''}},uat: {server: {host: '0.0.0.0',port: 7085,},api: {port: '',host: '预发布环境接口地址''}},prod: {server: {host: '0.0.0.0',port: 7085,},api: {port: '',host: '生产环境接口地址''}}
}第四步：nuxt.config.js配置基本的接口地址变量
import env from './env';
export default {env:{MODE:process.env.MODE},axios: {baseURL: env[process.env.MODE].api.host,},//修改默认的访问端口server: env[process.env.MODE].server,
}pm2服务部署以及进程监听
第一步:在你要部署项目的服务器上或者你本地电脑执行命令安装pm2
npm install pm2 -g
第二步:安装成功后，在自己的nuxt项目内新建ecosystem.config.js文件
module.exports = {apps: [{name: '项目名称',exec_mode: 'cluster',instances: 'max', // Or a number of instancesscript: './node_modules/nuxt/bin/nuxt.js',args: 'start', //npm run start:testwatch: true, //启动热重载//配置环境变量，这里的环境变量要与nuxt里边的`package.json`文件的变量相同env_prod: {NODE_ENV: 'production',MODE: 'prod',},env_test: {NODE_ENV: 'test',MODE: 'test',},env_uat: {NODE_ENV: 'uat',MODE: 'uat',},},],}第三步:启动服务
把你的nuxt项目提交到服务器上准备部署
- 1，执行命令
npm run build:prod - 2, 执行命令
pm2 start --env uat
这个时候项目服务就已经跑起来了。
vue-cli 配置环境变量
第一步：根目录下新建以下文件
- 1 ,文件中的内容
.env.test
# just a flag
ENV = 'test'# base api
VUE_APP_BASE_API = '测试环境接口地址''
- 2 ,文件中的内容
.env.development
# just a flag
ENV = 'development'# base api
VUE_APP_BASE_API = '测试环境接口地址''
第二步：package.json文件配置环境变量
"scripts": {"dev": "vue-cli-service serve --open","build:prod": "vue-cli-service build","build:test": "vue-cli-service build --mode test","build:uat": "vue-cli-service build --mode uat","test:unit": "vue-cli-service test:unit","lint": "vue-cli-service lint"},
第三步：在页面中使用这个全局变量就好了
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 // request timeout
})
结束语：这样全局的环境变量就配置好了
在其他页面也可以这样使用就好了。
vue 和 ssr+nuxt.js 配置环境变量以及pm2进行服务部署相关推荐
- rollup.js配置环境变量
场景: 由于项目是通过svelte.js + rollup.js框架搭建起来的, 并没有使用到cli脚手架, 没有办法配置不同环境的变量 一. 使用cross-env添加环境变量 安装cross-en ...
- MAC 搭建vue开发环境，配置环境变量
1.官网下载nodejs安装包 http://nodejs.p2hp.com/ 下载完成后安装,一直点击下一步即可 2.自定以配置全局模块路径和缓存路径 先自己找一个路径创建两个文件夹,node_ca ...
- Linux CentOS安装node.js及配置环境变量
安装的话有两种方法,第一种是在线安装,我这里安装的是最新的16.16.0稳定版本,一般安装在/usr/local/目录下 wget https://nodejs.org/dist/v16.16.0/n ...
- 2021最新Node.js官网安装教程，配置环境变量（图文详细）
打开官网 Node.js官网 ,选择自己的版本,这里我使用的是Windows64位的,下载.msi安装包 下载之后,双击运行 点击next下一步 勾选同意,点击Next下一步 选择安装路径,这里我选择 ...
- 从0带您打造企业级 Vue 服务器渲染 Nuxt.js (一) 入门
写在开始前 公司团队技术栈一直主要使用 Vue,由于 SPA 模式开发有几大痛点,团队在2017年开始尝试 SSR(服务端渲染). 记得刚开始 Nuxt.js 还没有到1.0(坑哭了),到目前为止团队 ...
- Vite（三）部署静态站点（wordpress与hugo与Vercel、CI/CD、Travis CI、GitLab CI）、环境变量与模式、服务端渲染（SSR）
Vite(三)部署静态站点(wordpress与hugo与Vercel.CI/CD.Travis CI.GitLab CI).环境变量与模式.服务端渲染(SSR) 文章目录 Vite(三)部署静态站点 ...
- NodeJs 的安装及配置环境变量
NodeJs 的安装及配置环境变量 一.Node.js 下载与安装 二.Node.js环境变量配置 三.国内镜像网站配置 一.Node.js 下载与安装 下载 在 Node官网 上,下载对应的安装包 ...
- nodejs 获取系统环境变量_Node.js中环境变量process.env的一些事详解
前言 最近这两天在和运维GG搞部署项目的事儿.碰到一个问题就是,咱们的dev,uat,product环境的问题. 因为是前后端分离,所以在开发和部署的过程中会有对后端接口的域名的切换问题.折腾了一下午 ...
- CentOS安装Jdk并配置环境变量
环境 CentOS7.2 (安装镜像CentOS-7-x86_64-DVD-1611) 目标 在CentOS7.2上安装jdk1.8(tar.gz安装包),并配置环境变量 jdk安装在/home/so ...
最新文章
- python开发应用程序错误怎么办_编程中遇到的Python错误和解决方法汇总整理
- Enterprise Library 3.0 安装过程
- Linux 安装 OpenOffice
- 计算机网络阅读报告,计算机网络实验二报告
- python抓取页面数据实例
- 中英文搜索引擎收录口整理
- java程序员面试题200题_Java程序员经典面试题集大全 （三十）
- 1981年长城一元硬币值钱吗？
- win7 oracle数据库删除用户名,win7操作系统、 oracle10g 数据库创建、卸载 用户名的创建 、删除...
- 关键字nullable，nonnull，null_resettable，_Null_unspecified详解
- c语言if怎么结束_07if与循环案例超经典C语言
- 讲python现状的文章_用 Python 分析 Python 工作现状
- 简单的 Nodejs jade 实现Hello world
- 人人商城小程序消息服务器配置,如何设置小程序模板消息？
- SQL Server 2008 R2每天自动备份数据库
- grafana快速搭建数据平台
- 一网打尽系列之史玉柱运营法则
- 2021-2027全球及中国特种机器人行业研究及十四五规划分析报告
- 天文学家发现“超级地球”
- WPF（三） WPF 命令