nuxt.js添加环境变量,区分项目打包环境操作


Posted in Javascript onNovember 06, 2020

最近由于业务需求,开发了一个nuxt.js项目。

配置打包环境变量时,发现nuxt.js的文档过于简单,无法做参照。

经查证了一些资料后,解决了该问题。遂整理成文档,发布于此,给同行一些参照。

一、添加cross-env插件

npm

npm i cross-env

yarn

yarn add cross-env

二、添加环境变量文件

根目录添加env.production

NODE_ENV = 'production'

VUE_APP_TITLE = 'production'

根目录添加env.test文件

NODE_ENV = 'production'

VUE_APP_TITLE = 'test'

三、注入全局环境变量

在nuxt.confit.js中添加环境变量配置

export default {
 env: {
   VUE_APP_TITLE: process.env.VUE_APP_TITLE
 }
}

四、修改打包命令

在package.json中修改以下命令

"scripts": {
  "dev": "nuxt",
  "build": "cross-env process.env.VUE_APP_TITLE=production nuxt build",
  "build:test": "cross-env process.env.VUE_APP_TITLE=test nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate",
  "test": "jest"
 }

运行 yarn build打生产环境包,yarn build:test打测试环境包。

补充知识:vue项目分环境打包的具体步骤 --- 区分测试环境与线上环境的打包引用路径

第一步: 安装cross-env

npm install --save-dev cross-env

运行跨平台设置和使用环境变量的脚本

第二步:修改package.json

在package.json

里设置打包命令 --- 主要是基于使用vue-cli创建的项目,配置文件基于 NODE_ENV=production 去处理,根据尽少的改动原有配置文件的原则,我们在这里,NODE_ENV最好都设成production,

增加一个 EVN_CONFIG 字段去区分环境

NODE_ENV=production EVN_CONFIG=dev 对应着

process.env.EVN_CONFIG(指的就是package.json 的EVN_CONFIG) 与config/index.js 的build 环境值 有对应关系

对package.json文件中的scripts内容进行个性,添加上新定义的几种环境的打包过程,里的参数与前面的调协保持一致。

"build:dev": "cross-env NODE_ENV=production EVN_CONFIG=dev node build/build.js",

"build:test": "cross-env NODE_ENV=production EVN_CONFIG=testing node build/build.js",

"build:prod": "cross-env NODE_ENV=production EVN_CONFIG=production node build/build.js"

nuxt.js添加环境变量,区分项目打包环境操作

第三步:修改config/index.js

修改config/index.js文件中build参数,这里的参数会在build/webpackage.prod.conf.js中使用到

nuxt.js添加环境变量,区分项目打包环境操作

第四步 修改build/webpackage.prod.conf.js

nuxt.js添加环境变量,区分项目打包环境操作

env ------ process.env.EVN_CONFIG 与config/index.js 的build 环境值 有对应关系

true
testing<br><br>console.log(env) ----
{ NODE_ENV: '"production"', EVN_CONFIG: '"testing"' }

nuxt.js添加环境变量,区分项目打包环境操作

初衷是为了 -- 区分测试环境与线上环境的打包引用路径

nuxt.js添加环境变量,区分项目打包环境操作

index: 模板

assetRoot: 打包后文件要存放的路径

assetsSubDirectory: 除了 index.html 之外的静态资源要存放的路径,

assetsPublicPath: 代表打包后,index.html里面引用资源的的相对地址

build: {
  // 添加test dev prod 三处环境的配制
  production: require('./prod.env'),
  dev: require('./dev.env'),
  testing: require('./test.env'),
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),
 
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  // assetsRoot: process.env.EVN_CONFIG === 'testing'?'../dist':'../h5',
  // assetsSubDirectory: './static',
  // assetsPublicPath: '/h5/',
  assetsSubDirectory:process.env.EVN_CONFIG === 'testing' ? './static':'static',
  assetsPublicPath:process.env.EVN_CONFIG === 'testing' ? '/h5/':'/',

以上这篇nuxt.js添加环境变量,区分项目打包环境操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS定义回车事件(实现代码)
Jul 08 Javascript
ES6的新特性概览
Mar 10 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 Javascript
使用Vue实现一个树组件的示例
Nov 06 #Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 #Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 #Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 #Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 #Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 #Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 #Javascript
You might like
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
jquery获取节点名称
2015/04/26 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
理解javascript正则表达式
2016/03/08 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
Django发送html邮件的方法
2015/05/26 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
python实现大转盘抽奖效果
2019/01/22 Python
python自定义时钟类、定时任务类
2021/02/22 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
关于青春的演讲稿
2014/05/05 职场文书
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技