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

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
Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐