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

本文详细介绍了如何使用npm run dev和npm run build配置Vue.js项目,以适应开发、测试和生产环境。通过修改build和config目录下的相关文件,如webpack配置和环境变量文件,实现环境切换。并提供了示例代码展示如何设置NODE_ENV、项目信息等,以及npm run脚本的配置方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在开发及线上(打包)过程中,经常会遇到根据不同的环境(开发、测试、生产)进行项目的发布。因此本文章主要介绍使用 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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值