VueJs各个版本— 判断当前是开发、生产环境

文章目录

VueJs各个版本— 判断当前是开发、生产环境
- vue项目分类
- VueCLI2
- - 1，判断样例
  - 2，判断原理
- Vue CLI 3 和 Vue CLI 4
- 1，判断样例
- 2, 判断原理
- - 手动设置-json文件
  - 手动设置- .env 文件
  - - 单个 .env 文件
    - 多个 .env 文件

vue项目分类

现存的vue项目可分为

VueCLI2 创建的项目
Vue CLI 3 和 Vue CLI 4 创建的项目

下面就讲讲各个环境创建下的开发和生产环境如何判断。

VueCLI2

在 Vue CLI 2 中，完整的目录结构如下所示：

- my-project/
  |- build/               # 构建相关的配置文件
  |   |- build.js         # 构建的入口文件
  |   |- check-versions.js # 检查版本的脚本
  |   |- utils.js         # 构建工具函数
  |   |- vue-loader.conf.js # Vue Loader 的配置文件
  |   |- webpack.base.conf.js # 基础的 Webpack 配置文件
  |   |- webpack.dev.conf.js # 开发环境的 Webpack 配置文件
  |   |- webpack.prod.conf.js # 生产环境的 Webpack 配置文件
  |- config/              # 配置文件
  |   |- dev.env.js       # 开发环境的配置
  |   |- index.js         # 主要的配置文件
  |   |- prod.env.js      # 生产环境的配置
  |- node_modules/        # 项目依赖的第三方模块
  |- src/                 # 源代码目录
  |   |- assets/          # 静态资源文件（图片、样式等）
  |   |- components/      # 组件文件
  |   |- router/          # 路由配置文件
  |   |- views/           # 视图文件
  |   |- App.vue          # 根组件
  |   |- main.js          # 入口文件
  |- static/              # 静态资源文件（不会被 webpack 处理）
  |- test/                # 测试文件
  |- .babelrc             # Babel 配置文件
  |- .editorconfig        # 编辑器配置文件
  |- .eslintignore        # ESLint 忽略配置文件
  |- .eslintrc.js         # ESLint 配置文件
  |- .gitignore           # Git 忽略配置文件
  |- index.html           # HTML 模板文件
  |- package.json         # 项目配置文件
  |- README.md            # 项目说明文件

1，判断样例

（1）有时我们需要在代码中判断目前项目是处于开发环境、还是生产环境，然后根据不同环境执行不同的逻辑代码。下面是一个简单的样例：

if (process.env.NODE_ENV === "development") {
  alert("开发环境");
}else {
  alert("生产环境");
}

（2）如果在开发环境（执行 npm run dev 的时候），则显示如下结果：

在这里插入图片描述

（3）如果在生产环境（执行 npm run build 的时候），则显示如下结果：
在这里插入图片描述

2，判断原理

（1）在项目的 config 文件夹下有 dev.env.js 和 prod.env.js 两个文件，它们分别配置开发环境的变量和生产环境的变量。

  |- config/              # 配置文件
  |   |- dev.env.js       # 开发环境的配置
  |   |- index.js         # 主要的配置文件
  |   |- prod.env.js      # 生产环境的配置

（2）打开 dev.env.js 文件，可以看到 NODE_ENV 变量值为 development。

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

（3）打开 prod.env.js 文件，可以看到 NODE_ENV 变量值为 production。

'use strict'
module.exports = {
  NODE_ENV: '"production"'
}

Vue CLI 3 和 Vue CLI 4

在 Vue CLI 3 和 Vue CLI 4 中，目录结构基本上是相同的

- my-project/
  |- public/              # 静态资源文件（不会被 webpack 处理）
  |- src/                 # 源代码目录
  |   |- assets/          # 静态资源文件（图片、样式等）
  |   |- components/      # 组件文件
  |   |- router/          # 路由配置文件
  |   |- views/           # 视图文件
  |   |- App.vue          # 根组件
  |   |- main.js          # 入口文件
  |- tests/               # 测试文件
  |- .browserslistrc      # 浏览器兼容性配置文件
  |- .eslintrc.js         # ESLint 配置文件
  |- babel.config.js      # Babel 配置文件
  |- package.json         # 项目配置文件
  |- README.md            # 项目说明文件

1，判断样例

在 Vue CLI 3 中，可以通过 process.env.NODE_ENV 来判断当前的环境是开发环境还是生产环境。

在开发环境中，process.env.NODE_ENV 的值会被设置为 'development'。你可以在代码中使用条件语句来根据当前环境执行不同的逻辑，例如：

if (process.env.NODE_ENV === 'development') {
  // 在开发环境中执行的逻辑
} else {
  // 在生产环境中执行的逻辑
}

在生产环境中，process.env.NODE_ENV 的值会被设置为 'production'。你可以根据需要在不同的环境中执行不同的代码，例如在开发环境中启用调试工具或者在生产环境中进行代码优化。

2, 判断原理

需要注意的是，process.env.NODE_ENV 的值是在构建过程中由 Vue CLI 自动生成的，你不需要手动设置它。在开发环境中，你可以通过 npm run serve 启动开发服务器，而在生产环境中，你可以通过 npm run build 构建项目。在构建过程中，Vue CLI 会自动设置 process.env.NODE_ENV 的值。

手动设置-json文件

在项目根目录下的 package.json 文件中，有一个 scripts 字段，其中定义了一些脚本命令。你可以在这些脚本命令中设置 NODE_ENV 环境变量。

"scripts": {
  "build:prod": "cross-env NODE_ENV=production vue-cli-service build"
}

手动设置- .env 文件

单个 .env 文件

项目的根目录下，创建一个名为 .env 的文件，并在其中设置环境变量

NODE_ENV=production

需要注意的是，.env 文件中定义的环境变量会被自动注入到构建过程中。在开发环境中，.env 文件中的变量会被注入到 process.env 对象中，而在生产环境中，这些变量会被用于构建过程。

多个 .env 文件

如果你想在不同的环境中使用不同的 .env 文件，可以创建多个 .env 文件，例如 .env.development 和 .env.production，然后在对应的环境中使用不同的文件。Vue CLI 会根据当前的环境自动加载对应的 .env 文件。

.env.development

NODE_ENV=development

.env.production

NODE_ENV=production