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 相关文章推荐
给Function做的OOP扩展
May 07 Javascript
有趣的javascript数组定义方法
Sep 10 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
微信小程序实现点击效果
Jun 21 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
php计算整个目录大小的方法
2015/06/19 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
python pandas修改列属性的方法详解
2018/06/09 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
实习老师离校感言
2014/02/03 职场文书
公司委托书范本
2014/04/04 职场文书
城市创卫标语
2014/06/17 职场文书
荆州古城导游词
2015/02/06 职场文书