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 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
jQuery创建插件的代码分析
Apr 14 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
利用PHP实现递归删除链表元素的方法示例
Oct 23 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
PHP学习 运算符与运算符优先级
2008/06/15 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
PHP异常处理浅析
2015/05/12 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
python中ConfigParse模块的用法
2014/09/29 Python
在Python中使用列表生成式的教程
2015/04/27 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
一套Delphi的笔试题一
2016/02/14 面试题
大学四年职业生涯规划书范文
2014/01/02 职场文书
编辑找工作求职信分享
2014/01/03 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
写给同事的离职感言
2015/08/04 职场文书
餐厅开业活动方案
2019/07/08 职场文书
Linux中sftp常用命令整理
2022/06/28 Servers