「随手一记」「Vue.js篇」「npm run dev（build）配置开发、测试、生产环境」

在开发及线上（打包）过程中，经常会遇到根据不同的环境（开发、测试、生产）进行项目的发布。因此本文章主要介绍使用 npm run dev 和 npm run build 进行配置开发、测试、生产环境的切换，这只是切换方式之一（当然还有其他的方式，这里不做介绍）。

本文章介绍的方法有点繁琐，仅供参数，若有哪里写错或不足的地方，请指教。

 

项目介绍

开发工具：Visual Studio Code

构建脚支架：webpack

项目名称：VUE-DEMO

 

涉及目录及文件

主要涉及目录及默认文件：build 和 config

  

主要涉及文件，共6个文件：

build\build.js：线上生产环境时用的脚本

build\webpack.dev.conf.js：开发过程中用的脚本

build\webpack.prod.conf.js：线上生产环境时用的脚本

config\dev.env.js：开发过程中用的配置脚本

config\prod.env.js：线上生产环境时用的配置脚本

package.json：涉及npm run 相关脚本

       特此说明：在 build 和 config 目录下看到 dev 和 prod 字眼的文件，是表示开发（dev）和线上（prod）的配置文件，其中 prod 不是正式的意思。

  

 

配置线上环境要点

主要涉及文件有：

build\build.js

build\webpack.prod.conf.js

config\prod.env.js

根据环境不同，进行复制相关文件并重命名对应的名称，具体见下文；

并修改（追加）其中对应引用的部分，如下图：

注意事项：config 目录中配置文件内的配置值必须由单引号和双引用包裹，否则会报错（下文相关配置均需要注意该事项）。

 

配置线上-生产环境

只需修改 config\prod.env.js 文件即可，其内容如下：

module.exports = {

  NODE_ENV: '"production"',

  // 项目信息

  INFO: '"PROJECT-PROD"',

  // 项目接口协议

  PROJECT_PROTOCOL: '"http"',

  // 项目接口域名（包含端口）

  PROJECT_INTERFACE_DOMAIN: '"prod.demo.com:81"'

}

       效果如下图：

 

配置线上-开发环境

将复制的文件分别重命名为：

build\build.dev.js

build\webpack.prod.dev.conf.js

config\prod.dev.env.js

分别修改内容如下：

require('./webpack.prod.dev.conf')

 

require('../config/prod.dev.env')

 

module.exports = {

  NODE_ENV: '"production"',

  // 项目信息

  INFO: '"PROJECT-PROD-DEV"',

  // 项目接口协议

  PROJECT_PROTOCOL: '"http"',

  // 项目接口域名（包含端口）

  PROJECT_INTERFACE_DOMAIN: '"dev.demo.com:82"'

}

效果如下图：

 

配置线上-测试环境

将复制的文件分别重命名为：

build\build.test.js

build\webpack.prod.test.conf.js

config\prod.test.env.js

分别修改内容如下：

require('./webpack.prod.test.conf')

 

require('../config/prod.test.env')

 

module.exports = {

  NODE_ENV: '"production"',

  // 项目信息

  INFO: '"PROJECT-PROD-TEST"',

  // 项目接口协议

  PROJECT_PROTOCOL: '"http"',

  // 项目接口域名（包含端口）

  PROJECT_INTERFACE_DOMAIN: '"test.demo.com:83"'

}

效果如下图：

 

配置开发环境要点

主要涉及文件有：

build\webpack.dev.conf.js

config\dev.env.js

根据环境不同，进行复制相关文件并重命名对应的名称，具体见下文；

并修改（追加）其中对应引用的部分，如下图：

       补充说明：merge 方法会将第一个参数对象和第二个参数对象的值进行合并，若两个参数均存在一样的属性，则以第二个参数对象中的值为准。

 

配置开发-生产环境

只需修改 config\dev.env.js 文件即可，其内容如下：

module.exports = merge(prodEnv, {

  NODE_ENV: '"development"',

  // 项目信息

  INFO: '"PROJECT-DEV"'

})

       效果如下图：

 

配置开发-开发环境

将复制的文件分别重命名为：

build\webpack.dev.dev.conf.js

config\dev.dev.env.js

分别修改内容如下：

require('../config/dev.dev.env')

             

const prodEnv = require('./prod.dev.env')

module.exports = merge(prodEnv, {

  NODE_ENV: '"development"',

  // 项目信息

  INFO: '"PROJECT-DEV-DEV"'

})

效果如下图：

 

配置开发-测试环境

将复制的文件分别重命名为：

build\webpack.dev.test.conf.js

config\dev.test.env.js

分别修改内容如下：

require('../config/dev.test.env')

 

const prodEnv = require('./prod.test.env')

module.exports = merge(prodEnv, {

  NODE_ENV: '"development"',

  // 项目信息

  INFO: '"PROJECT-DEV-TEST"'

})

效果如下图：

 

调整后的目录及文件展示

 

编写相关展示代码

首先在 src\main.js 文件内添加如下代码：

Vue.prototype.PROCESS_ENV = process.env;

效果如下图：

 

       在任意一个 *.vue 文件内添加如下代码：

<div>项目环境信息，读取 config 目录下对应配置文件信息：</div>

<div>process.env.NODE_ENV：{{ PROCESS_ENV.NODE_ENV }}</div>

<div>process.env.INFO：{{ PROCESS_ENV.INFO }}</div>

<div>process.env.PROJECT_PROTOCOL：{{ PROCESS_ENV.PROJECT_PROTOCOL }}</div>

<div>process.env.PROJECT_INTERFACE_DOMAIN：{{ PROCESS_ENV.PROJECT_INTERFACE_DOMAIN }}</div>

效果如下图：

 

npm run 脚本配置

主要涉及文件有：

package.json

原文件内的 scripts 配置如下图：

       主要是复制 dev 和 build 的属性及值，进行模仿编写，代码说明如下：

       开发-生产环境：直接使用 dev 即可。

       开发-开发环境："dev.dev": "webpack-dev-server --inline --progress --config build/webpack.dev.dev.conf.js"

       开发-测试环境："dev.test": "webpack-dev-server --inline --progress --config build/webpack.dev.test.conf.js"

       线上-生产环境：直接使用 build 即可。

       线上-开发环境："build.dev": "node build/build.dev.js"

       线上-测试环境："build.test": "node build/build.test.js"

效果如下图：

注意事项：scripts 内的配置属性名称，中间不能有空格，本文为了便于区分故用英文的点进行分隔，也可用其他符号或单词代替，只要保证属性名称唯一即可，切记属性名称中间不能有空格。

 

演示 npm run dev 效果

在终端内输入 npm run dev 命名，查看效果，如下图：

 

演示 npm run dev.dev 效果

在终端内输入 npm run dev.dev 命名，查看效果，如下图：

 

演示 npm run dev.test 效果

在终端内输入 npm run dev.test 命名，查看效果，如下图：

 

演示 npm run build 效果

在终端内输入 npm run build 命名，查看效果，如下图：

 

演示 npm run build.dev 效果

在终端内输入 npm run build.dev 命名，查看效果，如下图：

 

演示 npm run build.test 效果

在终端内输入 npm run build.test 命名，查看效果，如下图：

 

process.argv 简单介绍

有些文章提到通过 process.argv 进行环境切换，本人整理代码如下：

// process.argv 返回命令行脚本的各个参数组成的数组。其中参数都是从 process.argv[2] 开始，并且伴随着动态输入的变化，参数的个数也跟着变化的。

// const [node, path, ...argv] = process.argv;

let _argv = process.argv;

// 开发环境默认为：--inline

// 线上环境默认为：空对象，格式为：npm run build -- 参数（注意其中“--”符号前后各要有一个空格）

let _env = _argv.slice(2)[0] || 'prod';

// 特此说明：若利用 process.argv 进行环境切换的话，仅适用于 npm run build 命令

 

module.exports = {

  NODE_ENV: '"production"',

  // 项目信息

  INFO: '"PROJECT-PROD"',

  // 项目接口协议

  PROJECT_PROTOCOL: '"http' + _env + '"',

  // 项目接口域名（包含端口）

  PROJECT_INTERFACE_DOMAIN: '"prod.demo.com:81' + _argv + '"'

}

效果如下图：

展示效果如下图：

       参考文章：

http://www.myjscode.com/page/article81.html

https://m.jb51.net/article/137355.htm

https://blog.youkuaiyun.com/qishuixian/article/details/79860907

https://blog.youkuaiyun.com/corner2030/article/details/78528153