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 相关文章推荐
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 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
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
预加载css或javascript的js代码
2010/04/23 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
Vue中props的详解
2019/05/16 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
Python实现快速多线程ping的方法
2015/07/15 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
Django对models里的objects的使用详解
2019/08/17 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
护理专业推荐信
2013/11/07 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
上班迟到检讨书
2014/09/15 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
python 爬取吉首大学网站成绩单
2021/06/02 Python