cross-env 与 vue-cli-service 的区别

cross-env 与 vue-cli-service 的区别

  • 一、cross-env
    • 用法
      • 多环境基本内容配置 （非必要，全局变量的一种方式）
  • 二、vue-cli-service：
    • 用法

一、cross-env

它是为了解决跨平台环境变量设置的问题而开发的。

cross-env是一个用于设置跨平台环境变量的npm包。它解决了不同操作系统之间环境变量设置语法不一致的问题，使得开发者可以编写出跨平台的命令。以下是cross-env的用法、使用场景以及如何判断其是否使用成功：

用法

  1. 安装cross-env：

首先，你需要将cross-env安装到你的项目中。可以通过npm进行安装：

npm install cross-env --save-dev
  1. 在package.json中定义npm脚本：

安装完成后，你可以在package.json文件的scripts部分定义一个使用cross-env的脚本。例如：

"scripts": {"dev": "cross-env NODE_ENV=development vue-cli-service serve","build": "cross-env NODE_ENV=production vue-cli-service build"
}

在这个例子中，dev 脚本使用 cross-env 来设置 NODE_ENV 环境变量为 dev 。

然后就可以用到其他做一个判断，例如

let env = process.env;
console.log(env);
if (env.NODE_ENV == 'development') {//我的本地后端api地址baseUrl = 'http://127.0.0.1:5660/portalwork-saas-gateway'//其他的一些参数....
}else if (env.NODE_ENV == 'production') {}else if(env.NODE_ENV == 'test'){}else{}

多环境基本内容配置 （非必要，全局变量的一种方式）

这个非必要，看你个人情况，该处只是实现全局变量的一种方式

在 package.json 文件中添加各环境的配置，如下：

"envConfig": {"dev": {"API": "http://dev","IS_DEBUG": true},"test": {"API": "http://test","IS_DEBUG": true},"release": {"API": "http://release","IS_DEBUG": true},"build": {"API": "http://build","IS_DEBUG": true}
}

如需要配置其他内容，和API同级即可。
package.json 修改后的完整内容如下：

{"name": "my-vue2","version": "0.1.0","private": true,"scripts": {"dev": "cross-env ENV_KEY=dev vue-cli-service serve","test": "cross-env ENV_KEY=test vue-cli-service build","release": "cross-env ENV_KEY=release vue-cli-service build","build": "cross-env ENV_KEY=build vue-cli-service build"},"envConfig": {"dev": {"API": "http://dev","IS_DEBUG": true},"test": {"API": "http://test","IS_DEBUG": true},"release": {"API": "http://release","IS_DEBUG": true},"build": {"API": "http://build","IS_DEBUG": true}},"dependencies": {"axios": "^1.4.0","core-js": "^3.8.3","element-ui": "^2.15.13","vue": "^2.6.14","vue-router": "^3.0.1","vuex": "^3.0.1"},"devDependencies": {"@babel/core": "^7.12.16","@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-eslint": "~5.0.0","@vue/cli-service": "~5.0.0","cross-env": "^7.0.3","eslint": "^7.32.0","eslint-plugin-vue": "^8.0.3","image-minimizer-webpack-plugin": "^3.8.3","imagemin": "^8.0.1","imagemin-pngquant": "^9.0.2","less": "^4.2.0","less-loader": "^11.1.3","vue-template-compiler": "^2.6.14"},"browserslist": ["> 1%","last 2 versions","not dead"]
}

通过使用cross-env工具配置了环境变量ENV_KEY后，我们可以在vue.config.js文件中使用process.env.ENV_KEY来获取该环境变量的值。接着，可以根据获取到的值从package.json文件中获取对应的配置内容，并将其存储在全局变量中，从而实现多环境的配置。

webpack.DefinePlugin是 Webpack 插件之一，用于在构建过程中创建全局变量。它允许在代码中使用这些全局变量，可以在构建时将它们替换为具体的值。

在你的项目根目录下，找到 vue.config.js 文件，根据以下内容进行修改：

const webpack = require('webpack')
const packageConfig = require('./package.json')//假设使用的是“dev” 来启动项目的，那 该处的 ENV_CONFIG 为
// {"API": "http://dev","IS_DEBUG": true}
const ENV_CONFIG = packageConfig.envConfig[process.env.ENV_KEY]

plugins: [// 环境配置全局变量new webpack.DefinePlugin({ 'process.env.config': JSON.stringify(ENV_CONFIG) })
]

vue.config.js 修改后的完整内容如下：

const path = require('path')
const webpack = require('webpack')
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin') // 压缩图片插件
const packageConfig = require('./package.json')const ENV_CONFIG = packageConfig.envConfig[process.env.ENV_KEY]module.exports = {// 静态资源访问路径, 默认是 '/'publicPath: './',// 指定构建后的输出目录，默认是 'dist'outputDir: 'dist',// 是否每次保存时 lint 代码,可选值 (boolean | 'warning' | 'default' | 'error') 默认 'default'lintOnSave: 'default',// 配置开发服务器选项devServer: {// 开发服务器启动时是否自动打开浏览器open: false,// 端口号port: 3000},// 配置css相关选项css: {// 开启 source mapsourceMap: process.env.NODE_ENV == 'development'},// webpack 的配置对象configureWebpack: {// 配置需要使用的 webpack 插件plugins: [// 环境配置全局变量new webpack.DefinePlugin({'process.env.config': JSON.stringify(ENV_CONFIG)}),// 压缩图片new ImageMinimizerPlugin({minimizer: {// 指定了采用哪种图片压缩实现方式implementation: ImageMinimizerPlugin.imageminGenerate,// 压缩插件选项options: {plugins: ['pngquant'] // 用于对 PNG 图片进行压缩}}})],// 配置Webpack模块解析的方式，使得你可以通过模块名字而不是相对路径来引入模块resolve: {// 设置路径别名alias: {'@': path.resolve('src'),'@public': path.resolve('public'),'@img': path.resolve('src/assets/images'),'@js': path.resolve('src/assets/scripts'),'@css': path.resolve('src/assets/styles')}}}
}

webpack.DefinePlugin 是 Webpack 中的一个插件，它允许你在编译时创建配置的全局常量。这意味着你可以在源代码中使用这些常量，而 Webpack 会在编译时将它们替换为具体的值。

假设你有以下的源代码：

if (process.env.config.IS_DEBUG) {  console.log('Debug mode is on!');  
}  fetch(`${process.env.config.API}/data`)  .then(response => response.json())  .then(data => console.log(data));

当 Webpack 编译这段代码时，它会将其转换为：

if (true) {  console.log('Debug mode is on!');  
}  fetch('https://api.example.com/data')  .then(response => response.json())  .then(data => console.log(data));

注意，process.env.config.IS_DEBUG 和 process.env.config.API 都被替换为具体的值。

无论是 vue-cli-service serve（启动） 还是 vue-cli-service build（打包），
DefinePlugin 都会执行替换操作。

这种方法的一个主要优点是它可以帮助你避免在运行时暴露敏感的配置信息，因为这些信息在编译时就已经被替换掉了。

二、vue-cli-service：

vue-cli-service 是随着 Vue CLI 的发展而出现的。Vue CLI 是一个基于 Vue.js 的全功能脚手架，它提供了大量的插件和工具，帮助开发者快速搭建 Vue.js 项目并进行高效开发。Vue CLI 的出现极大地简化了 Vue.js 项目的创建和管理过程，而 vue-cli-service 作为 Vue CLI 的核心服务，为项目提供了开发服务器、构建工具以及其他实用功能。

Vue CLI 的历史可以追溯到 Vue.js 项目的早期发展。随着 Vue.js 的流行和社区的发展，对于一套统一的、易用的项目创建和管理工具的需求逐渐增加。因此，Vue 团队和社区成员开始合作开发 Vue CLI，而 vue-cli-service 作为其中的一部分，也随之出现。

vue-cli-service 是 Vue.js 的官方命令行工具，主要用于在 Vue CLI 创建的项目中执行各种开发和管理任务。下面是关于 vue-cli-service 的用法、使用场景以及如何判断其是否使用成功的信息。

用法

在 package.json 文件里面的体现一般为

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},

而在这些命令，会存在一个重要的概念 ** 模式 **

** 模式 **是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

  • development 模式
  • test 模式
  • production 模式

vue-cli-service serve 默认使用的是 development 模式
vue-cli-service test:unit 默认使用的是 test 模式
vue-cli-service build 和 vue-cli-service test:e2e 默认使用的是 production 模式
vue-cli-service lint 则用于代码质量检查。

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。
例如，如果你想要在构建打包命令中使用开发环境变量：

vue-cli-service build --mode development

参考文章
【1】第七步 Webpack 配置多环境和全局变量 cross-env 和 webpack.DefinePlugin
https://blog.csdn.net/mebell/article/details/132983836
【2】process.env环境变量配置方式（配置环境变量区分开发环境和生产环境）
https://blog.csdn.net/duansamve/article/details/122645027

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/826871.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

2023年网络安全行业：机遇与挑战并存

2023年网络安全行业：机遇与挑战并存

2023年全球网络安全人才概况 根据ISC2的《2023年全球网络安全人才调查报告》，全球的网络安全专业人才数量达到了550万，同比增长了8.7%。然而，这一年也见证了网络安全人才短缺达到了历史新高，缺口数量接近400万。尤其是亚太地区&am…
阅读更多...
luckysheet的使用——15.复制有合并单元格的某一行的格式到一个指定空白行

luckysheet的使用——15.复制有合并单元格的某一行的格式到一个指定空白行

在插入空白行的时候，如果是在画好的表格下插入，api提供的插入空白行会插入没有任何格式的一行，无法匹配合并了单元格的表格格式，需要手动编写api 1.找到api.js，在src/global中,新增一个方法 /*** 复制有合并单元格的…
阅读更多...
ARM_day6：实现字符串数据收发函数的封装

ARM_day6：实现字符串数据收发函数的封装

程序代码： uart4.h： #ifndef __UART4_H__ #define __UART4_H__ #include"stm32mp1xx_gpio.h" #include"stm32mp1xx_rcc.h" #include"stm32mp1xx_uart.h" void uart4_config(); void putchar(char dat); char getchar();…
阅读更多...
【电机参数】直流无刷电机机械转速、ud、uq、us、输出功率、相反电动势幅值、载波周期、转矩常数

【电机参数】直流无刷电机机械转速、ud、uq、us、输出功率、相反电动势幅值、载波周期、转矩常数

【电机参数】直流无刷电机机械转速、ud、uq、us、输出功率、相反电动势幅值、载波周期、转矩常数 前言 【电机控制】直流有刷电机、无刷电机汇总——持续更新 使用工具： 1.示波器：PICO2205A 2.电桥LCR：VICIOR4090A 3.电流钳：汉泰…
阅读更多...
接口测试相关

接口测试相关

接口测试，接口 接口是数据交互的入口和出口 接口是一套规范和标准 统一设计标准 前后端相对独立 扩展型灵活 接口文档。 接口测试 接口测试环境，运行程序，自己搭建环境 接口测试插件 谷歌postman 火狐 restclient java测试工具为j…
阅读更多...
Linux系统的磁盘管理与文件系统

Linux系统的磁盘管理与文件系统

目录 一、磁盘结构 1.物理结构 2.数据结构 二、MBR与磁盘分区表示 1.MBR 2.磁盘分区表示 分区的优点 分区的缺点 三、文件系统类型 1.文件系统的组成 XFS SWAP EXT4 2.磁盘管理工具 四、Linux系统添加新硬盘的步骤 一、磁盘结构 1.物理结构 所有存储的设备都在…
阅读更多...
【面试经典 150 | 数组】最后一个单词的长度

【面试经典 150 | 数组】最后一个单词的长度

文章目录 写在前面Tag题目来源解题思路方法一：遍历 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法，两到三天更新一篇文章，欢迎催更…… 专栏内容以分析题目为主，并附带一些对于本题涉及到的数据结构等内容进行回顾…
阅读更多...
Android 性能优化之黑科技开道（二）

Android 性能优化之黑科技开道（二）

3. 其它可以黑科技优化的方向 3.1 核心线程绑定大核 3.1.1 定义 核心线程绑定大核的思路也很容易理解，现在的 CPU 都是多核的，大核的频率比小核要高不少，如果我们的核心线程固定运行在大核上，那么应用性能自然会有所提升。 核…
阅读更多...
【Qt】Qt界面构建与对象管理：从 “Hello World“ 到内存释放

【Qt】Qt界面构建与对象管理：从 “Hello World“ 到内存释放

文章目录 1. 通过图形化界面创建控件2. 通过纯代码方式创建控件3. 对象树管理与内存管理小结： 在软件开发中，构建用户界面是至关重要的一步。Qt作为一个跨平台的C框架，提供了强大的界面构建工具和对象树管理机制，使得界面开发变得…
阅读更多...
Leetcode 3123. Find Edges in Shortest Paths

Leetcode 3123. Find Edges in Shortest Paths

Leetcode 3123. Find Edges in Shortest Paths 1. 解题思路2. 代码实现 题目链接：3123. Find Edges in Shortest Paths 1. 解题思路 这一题思路上的话就是一个最短路径的求解问题，我们使用一个堆排即可对其进行实现。 不过，做题的时候挺犹…
阅读更多...
单页面首屏优化，打包后大小减少64M，加载速度快了13.6秒

单页面首屏优化，打包后大小减少64M，加载速度快了13.6秒

需求背景 从第三方采购的vue2 ElementUI实现的云管平台，乙方说2011年左右就开始有这个项目了（那时候有Vue了吗，思考.jpg）。十几年的项目，我何德何能可以担此责任。里面的代码经过多人多年迭代可以用惨不忍睹来形容&a…
阅读更多...
Qt做关于界面

Qt做关于界面

在上位机系统中，经常需要显示当前软件版本，当前fpga版本，那么咱就做一个help的菜单的关于界面 解决的问题： 解决显示版本信息的UI Axure界面图： 如何实现： 实现文件的存储：QSetting来存储版…
阅读更多...
初始jQuery

初始jQuery

目录 前言: 1.jQuery介绍 2.引入jQuery 3.工厂函数$() 3.1使用CSS选择器获取元素： 3.2将原生JavaScript对象转换为jQuery对象： 3.3从jQuery对象转换到原生JavaScript对象： 4. jQuery获取元素 4.1基础选择器 4.1.1标签选择器&#xf…
阅读更多...
【入门深入篇】本章包括条件查询、排序查询、分页查询、分页实战举例（小程序之云函数开发入门到使用发布上线实操）

【入门深入篇】本章包括条件查询、排序查询、分页查询、分页实战举例（小程序之云函数开发入门到使用发布上线实操）

1. 条件查询 假设我们需要查询年龄大于等于 18 岁的用户记录： // 云函数入口函数 exports.main = async (event, context) => {const {minAge } = event; // 从事件中获取用户提供的最小年龄try {<
阅读更多...
玩转Virtual Box虚拟机

玩转Virtual Box虚拟机

玩转Virtual Box虚拟机 虚拟化技术和虚拟机简介 什么是虚拟化技术&#xff1f; 虚拟化技术是将计算机的各种硬件资源予以抽象、转换、分割、组合的一种计算机技术。虚拟化技术打破了实体结构间不可切割的障碍&#xff0c;从而使用户可以按照需求重新组合硬件资源&#xff0c…
阅读更多...
NX二次开发UF_MTX（矩阵运算）常用函数

NX二次开发UF_MTX（矩阵运算）常用函数

目录 一、概述 二、函数的介绍 2.1 UF_MTX3_copy&#xff08;复制原来矩阵&#xff09; 2.2 UF_MTX3_determinant&#xff08;计算矩阵的行列式&#xff09; 2.3 UF_MTX3_identity&#xff08;单位矩阵&#xff09; 2.4 UF_MTX3_initialize&#xff08;可以根据X、Y方向向…
阅读更多...
写在30岁

写在30岁

关于新角色 怀孕之后感觉自己的天空从蓝色变成了灰色。 以前的生活&#xff0c;说很累&#xff0c;也不累。每天早上一杯咖啡&#xff0c; 然后噼里啪啦开始一天的工作。即使有压力、会烦心&#xff0c;但是身体上不会有任何的不适。在入职的第一年&#xff0c;整个月报备 6 点…
阅读更多...
linux 驱动-匹配

linux 驱动-匹配

目录 匹配入口 匹配顺序(platform_match ) 方式1: 方式2&#xff08;重点&#xff09; 方式3 方式4 (重点) 匹配入口 driver_match_device 实际调用platform_match driver_match_device(drv, dev);static inline int driver_match_device(struct device_driver *drv,str…
阅读更多...
R: 阿尔法α多样性计算和箱图制作，以及差异分析

R: 阿尔法α多样性计算和箱图制作，以及差异分析

# install.packages("vegan") library(vegan) library(ggplot2) library(ggpubr)setwd("xxx") # 使用read.table()函数读取数据 df <- read.table("xxx", header TRUE, row.names 1)# 转置数据框 df <- t(df)# 计算每个样品的香农多样性…
阅读更多...
数据中台建设五步法之高阶规划

数据中台建设五步法之高阶规划

​系统都是为应用而生的&#xff0c;数据中台也不例外。要构建一套数据中台服务于企业内部和外部运营&#xff0c;需要有成熟的建设方法论作为指导。数据中台建设方法论可分为高阶规划、系统设计、开发实施、试运行和持续运营 5 个阶段。 本篇内容为大家讲解第一阶段——高阶规…
阅读更多...
最新文章

Copyright @ 2022~2023