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

Slow菜鸟

已于 2024-07-05 15:04:45 修改

阅读量1k

点赞数 7

文章标签： vue.js 前端 javascript

于 2024-04-15 21:27:51 首次发布

本文链接：https://blog.csdn.net/qq_20236937/article/details/137790390

版权

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

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

一、cross-env

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

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

用法

安装cross-env：

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

npm install cross-env --save-dev

在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 map
    sourceMap: 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

总结

cross-env主要用于跨平台地设置环境变量，
而vue-cli-service则是Vue CLI提供的构建工具，用于编译Vue.js项目。
在Vue.js项目中，它们经常一起使用来确保项目在不同环境下都能正确运行。

参考文章
【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

Slow菜鸟

关注

7
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
cross-env 与 vue-cli-service 的区别

是随着 Vue CLI 的发展而出现的。Vue CLI 是一个基于 Vue.js 的全功能脚手架，它提供了大量的插件和工具，帮助开发者快速搭建 Vue.js 项目并进行高效开发。随着 Vue.js 的流行和社区的发展，对于一套统一的、易用的项目创建和管理工具的需求逐渐增加。vue-cli-service test:unit 默认使用的是 test 模式vue-cli-service build。是 Vue.js 的官方命令行工具，主要用于在 Vue CLI 创建的项目中执行各种开发和管理任务。
复制链接

扫一扫